<!DOCTYPE html>
<html lang="en">
<head>
+ <meta name="width" content="350">
+ <meta name="height" content="470">
<meta charset="UTF-8">
<title>Title</title>
+ <link rel="stylesheet" href="style.css">
</head>
<body>
+<canvas id="canvas">
+
+</canvas>
<div id="container">
+ <div class="pinterest">
+ <img class="logo" src="pinterest.png" alt="">
+ <span class="more">En savoir plus</span>
+ </div>
</div>
<script src="jQuery.js"></script>
<script src="main.js"></script>
url: 'rss.xml',
dataType: 'text',
success: function (data) {
- //console.log(data);
+
var xmlDoc = $.parseXML(data),
$xml = $(xmlDoc);
var description_text= desc_jquery.text();
var img = $(desc_jquery).find('img').attr('src');
- var div = ('<div class="item">'+
- '<div class="description">'+
- description_text
- +'</div>' +
- '<div class="image">' +
- '<img src="'+img+'">'
- +'</div>' +
- '</div>');
+ var div = $('<div class="item">'+
+ '<div class="image"></div>' +
+ '<div class="description">'+
+ description_text
+ +'</div>' +
+ '</div>');
+ $(div).find(".image").css("background-image","url("+img+")");
$('#container').append(div);
+ $( '.item' ).addClass("hidden");
+
});
+ var slideItem = $(".item"),
+ slidelength = slideItem.length ,
+ count = -1;
+ function goNextSlide(){
+ $(slideItem).addClass('hidden').removeClass('fadeIN');
+ $(slideItem).eq((++count)%slidelength).removeClass('hidden').addClass('fadeIN');
+ }
+ goNextSlide();
+ setInterval(goNextSlide, 4000 );
}
+
});
-});
\ No newline at end of file
+});
+
--- /dev/null
+*{
+ padding: 0px;
+ margin: 0px;
+}
+#canvas{
+ width: 350px;
+ height: 470px;
+ position: absolute;
+ display: none;
+}
+@font-face {
+ font-family: "typo" ;
+ src: url("roboto.woff") format('woff');
+}
+
+#container{
+ width: 350px;
+ height: 470px;
+ background-color: white;
+}
+.item{
+ text-align: center;
+ position: relative;
+
+}
+.description{
+ text-align: left;
+ width: 280px;
+ height: 45px;
+ padding: 0px 32px;
+ margin-top: 50px;
+ line-height: 1.33;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ font-family: typo;
+ font-size: 17px;
+ color: #3d3d3d;
+}
+.image{
+ height: 300px;
+ width: 280px;
+ background-size: contain;
+ background-repeat: no-repeat;
+ background-position: center;
+ position: relative;
+ top: 25px;
+ left: 31px;
+}
+.pinterest{
+ width: calc(350px - 60px);
+ padding: 0px 30px;
+ position: fixed;
+ top: 420px;
+ display: flex;
+ align-items: center;
+ pointer-events: none;
+}
+.logo{
+ width: 20px;
+ margin-right: 10px;
+}
+.more{
+ font-family: typo;
+ font-size: 16px;
+ color: #3d3d3d;
+}
+.fadeIN{
+ -webkit-animation: fadein 0.5s; /* Safari, Chrome and Opera > 12.1 */
+ -moz-animation: fadein 0.5s; /* Firefox < 16 */
+ -ms-animation: fadein 0.5s; /* Internet Explorer */
+ -o-animation: fadein 0.5s; /* Opera < 12.1 */
+ animation: fadein 0.5s;
+ display: block;
+}
+@keyframes fadein {
+ from { opacity: 0; }
+ to { opacity: 1; }
+}
+
+.hidden{
+ display: none;
+}
\ No newline at end of file
projects / Animations.git / commitdiff