Delay loading of images in slideshow with setTimeout - javascript

I have a fullscreen slideshow that consists of 4 slides, but I do not want to load all images at the same time, so I thought of adding a setTimeout in javascript like this:
$(document).ready(function(){
setTimeout(function(){
$('.cb-slideshow li:nth-child(2) span').css("background-image: url(/slides/2.jpg)");
}, 5000);
The slideshow consists of 6 elements, each animated in with keyframes.
Slides:
.cb-slideshow li:nth-child(1) span {
background-image: url(/slides/1.jpg)
}
.cb-slideshow li:nth-child(2) span {
background-image: url(/slides/2.jpg);
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
background-image: url(/slides/3.jpg);
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) span {
background-image: url(/slides/4.jpg);
animation-delay: 18s;
}
Slideshow:
<ul class="cb-slideshow">
<li><span>Image 01</span></li>
<li><span>Image 02</span></li>
<li><span>Image 03</span></li>
<li><span>Image 04</span></li>
</ul>
Style:
.cb-slideshow,
.cb-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: -2;
list-style: none
}
.cb-slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: -2;
-webkit-backface-visibility: hidden;
animation: imageAnimation 24s linear infinite 0s;
}
.cb-slideshow li div {
z-index: 1000;
position: absolute;
bottom: 90px;
left: 0px;
width: 100%;
text-align: right;
opacity: 0;
-webkit-animation: titleAnimation 24s linear infinite 0s;
-moz-animation: titleAnimation 24s linear infinite 0s;
-o-animation: titleAnimation 24s linear infinite 0s;
-ms-animation: titleAnimation 24s linear infinite 0s;
animation: titleAnimation 24s linear infinite 0s;
}
.cb-slideshow li div h3 {
font-size: 160px;
padding: 0 30px;
line-height: 120px;
color: rgba(169,3,41, 0.8);
}
.cb-slideshow li:nth-child(2) div {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) div {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) div {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
But it's not working. Can I even have li:nth-child(2) inside a script? Any ideas?


Delay loading of images in slideshow with setTimeout?
This would be my approach.
Adjust your HTML, by adding your image src's as attributes i.e. data-bg-src="/slides/2.jpg":
<ul class="cb-slideshow">
<li>
<span style="background-image:url('https://picsum.photos/1200/800?image=0')">Image 01</span>
</li>
<li>
<span data-bg-src="https://picsum.photos/1200/800?image=1">Image 02</span>
</li>
<li>
<span data-bg-src="https://picsum.photos/1200/800?image=2">Image 03</span>
</li>
<li>
<span data-bg-src="https://picsum.photos/1200/800?image=3">Image 04</span>
</li>
</ul>
JavaScript:
(function() {
const bgSrcs = document.querySelectorAll('[data-bg-src]');
for (let i = 0, m = bgSrcs.length; i < m; i++) {
setTimeout(() => {
bgSrcs[i].style.backgroundImage = 'url(' + bgSrcs[i].dataset.bgSrc + ')';
// Or in jQuery
// $(bgSrcs[i]).css('background-image: url(' + bgSrcs[i].dataset.bgSrc + ')');
}, i * 1000); // Stagger the load
}
})();
JSFiddle (Open the console)
I presume this is in an effort to increase performance by lazy loading images. If this is the case, there are far better ways of doing this. Among the many resources out there, this one on CSS Tricks appears to be the most comprehensive and up-to-date.
EDIT 1:
Your CSS is broken too. You'll need to add the following, if your adding the background-images to the <span>:
.cb-slideshow li{
width: 100%;
height: 100%;
position: absolute;
}
And remove opacity: 0; from .cb-slideshow li span {}.
Below is an example of this in action.

Related

how to make wave animation?

I want to make a wave. There is sample animation that i made. so i want to change this animation like this. there is number of rectangles. Expanding both sides of the rectangle
What i want to do is this time rectangle is expanding both sides(Up & down sides) but i want to expand only on side(up side) like music player.
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
div {
width: 1300px;
height: 300px;
margin: 100px auto;
}
span {
display: inline-block;
background-color: green;
width: 20px;
height: 20px;
animation: wave 1s linear infinite;
}
.a1 {
animation-delay: .0s;
}
.a2 {
animation-delay: .2s;
}
.a3 {
animation-delay: .3s;
}
.a4 {
animation-delay: .4s;
}
.a5 {
animation-delay: .5s;
}
.a6 {
animation-delay: .6s;
}
.a7 {
animation-delay: .7s;
}
.a8 {
animation-delay: .8s;
}
.a9 {
animation-delay: .9s;
}
.a10 {
animation-delay: 1.0s;
}
#keyframes wave {
50%{
transform: scaleY(80);
transform: scaleY(5);
}
}
<div>
<span class="a1"></span>
<span class="a2"></span>
<span class="a3"></span>
<span class="a4"></span>
<span class="a5"></span>
<span class="a6"></span>
<span class="a7"></span>
<span class="a8"></span>
<span class="a9"></span>
<span class="a10"></span>
</div>

Just set the transform-origin of the span to bottom center(default is center center).
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
div {
width: 1300px;
height: 300px;
margin: 100px auto;
}
span {
display: inline-block;
background-color: green;
width: 20px;
height: 20px;
animation: wave 1s linear infinite;
transform-origin: bottom center;
}
.a1 {
animation-delay: .0s;
}
.a2 {
animation-delay: .2s;
}
.a3 {
animation-delay: .3s;
}
.a4 {
animation-delay: .4s;
}
.a5 {
animation-delay: .5s;
}
.a6 {
animation-delay: .6s;
}
.a7 {
animation-delay: .7s;
}
.a8 {
animation-delay: .8s;
}
.a9 {
animation-delay: .9s;
}
.a10 {
animation-delay: 1.0s;
}
#keyframes wave {
50% {
transform: scaleY(80);
transform: scaleY(5);
}
}
<div>
<span class="a1"></span>
<span class="a2"></span>
<span class="a3"></span>
<span class="a4"></span>
<span class="a5"></span>
<span class="a6"></span>
<span class="a7"></span>
<span class="a8"></span>
<span class="a9"></span>
<span class="a10"></span>
</div>

Injecting a CSS/HTML loader into multiple parts of my site (html, js, vuejs)

I have an animated loader made up of some html:
<!-- full page loading screen -->
<div id="fs-spinner-wrapper">
<div class="spinner fs-spinner">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
</div>
Which has associated CSS to get it animated. Currently I am including this HTML code at every point where I need the loader to appear... which is quite messy, especially when using it within vueJS components and other javascript functions.
Can anyone suggest the best way to be able to inject this HTML into each part of my site that needs it. In an ideal world I would love to use a standard icon approach, but am not sure if this is possible?
<i class="myicon"></i>
CSS:
/* loading animation */
.spinner {
/*width: 50px;*/
height: 40px;
text-align: center;
font-size: 10px;
}
.spinner > div {
background-color: #ececec;
height: 100%;
width: 6px;
display: inline-block;
-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
animation: sk-stretchdelay 1.2s infinite ease-in-out;
}
.spinner .rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.spinner .rect3 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
.spinner .rect4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.spinner .rect5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
#-webkit-keyframes sk-stretchdelay {
0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
20% { -webkit-transform: scaleY(1.0) }
}
#keyframes sk-stretchdelay {
0%, 40%, 100% {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4);
} 20% {
transform: scaleY(1.0);
-webkit-transform: scaleY(1.0);
}
}

Links to animated background image landing page

I have a landing page with 8 background images using a javascript to animate it fading in/out and I'd like to add links to each of the images when they appear. Is this possible?
If so, what do I need to change into the code, I tried by adding (a) at the (ul) but didn't work.
Thank you,
Max
/* Modernizr 2.0.6 (Custom Build) | MIT & BSD
* Build: http://www.modernizr.com/download/#-cssanimations-iepp-cssclasses-testprop-testallprops-domprefixes-load
*/
;window.Modernizr=function(a,b,c){function A(a,b){var c=a.charAt(0).toUpperCase()+a.substr(1),d=(a+" "+n.join(c+" ")+c).split(" ");return z(d,b)}function z(a,b){for(var d in a)if(k[a[d]]!==c)return b=="pfx"?a[d]:!0;return!1}function y(a,b){return!!~(""+a).indexOf(b)}function x(a,b){return typeof a===b}function w(a,b){return v(prefixes.join(a+";")+(b||""))}function v(a){k.cssText=a}var d="2.0.6",e={},f=!0,g=b.documentElement,h=b.head||b.getElementsByTagName("head")[0],i="modernizr",j=b.createElement(i),k=j.style,l,m=Object.prototype.toString,n="Webkit Moz O ms Khtml".split(" "),o={},p={},q={},r=[],s,t={}.hasOwnProperty,u;!x(t,c)&&!x(t.call,c)?u=function(a,b){return t.call(a,b)}:u=function(a,b){return b in a&&x(a.constructor.prototype[b],c)},o.cssanimations=function(){return A("animationName")};for(var B in o)u(o,B)&&(s=B.toLowerCase(),e[s]=o[B](),r.push((e[s]?"":"no-")+s));v(""),j=l=null,a.attachEvent&&function(){var a=b.createElement("div");a.innerHTML="<elem></elem>";return a.childNodes.length!==1}()&&function(a,b){function s(a){var b=-1;while(++b<g)a.createElement(f[b])}a.iepp=a.iepp||{};var d=a.iepp,e=d.html5elements||"abbr|article|aside|audio|canvas|datalist|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video",f=e.split("|"),g=f.length,h=new RegExp("(^|\\s)("+e+")","gi"),i=new RegExp("<(/*)("+e+")","gi"),j=/^\s*[\{\}]\s*$/,k=new RegExp("(^|[^\\n]*?\\s)("+e+")([^\\n]*)({[\\n\\w\\W]*?})","gi"),l=b.createDocumentFragment(),m=b.documentElement,n=m.firstChild,o=b.createElement("body"),p=b.createElement("style"),q=/print|all/,r;d.getCSS=function(a,b){if(a+""===c)return"";var e=-1,f=a.length,g,h=[];while(++e<f){g=a[e];if(g.disabled)continue;b=g.media||b,q.test(b)&&h.push(d.getCSS(g.imports,b),g.cssText),b="all"}return h.join("")},d.parseCSS=function(a){var b=[],c;while((c=k.exec(a))!=null)b.push(((j.exec(c[1])?"\n":c[1])+c[2]+c[3]).replace(h,"$1.iepp_$2")+c[4]);return b.join("\n")},d.writeHTML=function(){var a=-1;r=r||b.body;while(++a<g){var c=b.getElementsByTagName(f[a]),d=c.length,e=-1;while(++e<d)c[e].className.indexOf("iepp_")<0&&(c[e].className+=" iepp_"+f[a])}l.appendChild(r),m.appendChild(o),o.className=r.className,o.id=r.id,o.innerHTML=r.innerHTML.replace(i,"<$1font")},d._beforePrint=function(){p.styleSheet.cssText=d.parseCSS(d.getCSS(b.styleSheets,"all")),d.writeHTML()},d.restoreHTML=function(){o.innerHTML="",m.removeChild(o),m.appendChild(r)},d._afterPrint=function(){d.restoreHTML(),p.styleSheet.cssText=""},s(b),s(l);d.disablePP||(n.insertBefore(p,n.firstChild),p.media="print",p.className="iepp-printshim",a.attachEvent("onbeforeprint",d._beforePrint),a.attachEvent("onafterprint",d._afterPrint))}(a,b),e._version=d,e._domPrefixes=n,e.testProp=function(a){return z([a])},e.testAllProps=A,g.className=g.className.replace(/\bno-js\b/,"")+(f?" js "+r.join(" "):"");return e}(this,this.document),function(a,b,c){function k(a){return!a||a=="loaded"||a=="complete"}function j(){var a=1,b=-1;while(p.length- ++b)if(p[b].s&&!(a=p[b].r))break;a&&g()}function i(a){var c=b.createElement("script"),d;c.src=a.s,c.onreadystatechange=c.onload=function(){!d&&k(c.readyState)&&(d=1,j(),c.onload=c.onreadystatechange=null)},m(function(){d||(d=1,j())},H.errorTimeout),a.e?c.onload():n.parentNode.insertBefore(c,n)}function h(a){var c=b.createElement("link"),d;c.href=a.s,c.rel="stylesheet",c.type="text/css";if(!a.e&&(w||r)){var e=function(a){m(function(){if(!d)try{a.sheet.cssRules.length?(d=1,j()):e(a)}catch(b){b.code==1e3||b.message=="security"||b.message=="denied"?(d=1,m(function(){j()},0)):e(a)}},0)};e(c)}else c.onload=function(){d||(d=1,m(function(){j()},0))},a.e&&c.onload();m(function(){d||(d=1,j())},H.errorTimeout),!a.e&&n.parentNode.insertBefore(c,n)}function g(){var a=p.shift();q=1,a?a.t?m(function(){a.t=="c"?h(a):i(a)},0):(a(),j()):q=0}function f(a,c,d,e,f,h){function i(){!o&&k(l.readyState)&&(r.r=o=1,!q&&j(),l.onload=l.onreadystatechange=null,m(function(){u.removeChild(l)},0))}var l=b.createElement(a),o=0,r={t:d,s:c,e:h};l.src=l.data=c,!s&&(l.style.display="none"),l.width=l.height="0",a!="object"&&(l.type=d),l.onload=l.onreadystatechange=i,a=="img"?l.onerror=i:a=="script"&&(l.onerror=function(){r.e=r.r=1,g()}),p.splice(e,0,r),u.insertBefore(l,s?null:n),m(function(){o||(u.removeChild(l),r.r=r.e=o=1,j())},H.errorTimeout)}function e(a,b,c){var d=b=="c"?z:y;q=0,b=b||"j",C(a)?f(d,a,b,this.i++,l,c):(p.splice(this.i++,0,a),p.length==1&&g());return this}function d(){var a=H;a.loader={load:e,i:0};return a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=r&&!s,u=s?l:n.parentNode,v=a.opera&&o.call(a.opera)=="[object Opera]",w="webkitAppearance"in l.style,x=w&&"async"in b.createElement("script"),y=r?"object":v||x?"img":"script",z=w?"img":y,A=Array.isArray||function(a){return o.call(a)=="[object Array]"},B=function(a){return Object(a)===a},C=function(a){return typeof a=="string"},D=function(a){return o.call(a)=="[object Function]"},E=[],F={},G,H;H=function(a){function f(a){var b=a.split("!"),c=E.length,d=b.pop(),e=b.length,f={url:d,origUrl:d,prefixes:b},g,h;for(h=0;h<e;h++)g=F[b[h]],g&&(f=g(f));for(h=0;h<c;h++)f=E[h](f);return f}function e(a,b,e,g,h){var i=f(a),j=i.autoCallback;if(!i.bypass){b&&(b=D(b)?b:b[a]||b[g]||b[a.split("/").pop().split("?")[0]]);if(i.instead)return i.instead(a,b,e,g,h);e.load(i.url,i.forceCSS||!i.forceJS&&/css$/.test(i.url)?"c":c,i.noexec),(D(b)||D(j))&&e.load(function(){d(),b&&b(i.origUrl,h,g),j&&j(i.origUrl,h,g)})}}function b(a,b){function c(a){if(C(a))e(a,h,b,0,d);else if(B(a))for(i in a)a.hasOwnProperty(i)&&e(a[i],h,b,i,d)}var d=!!a.test,f=d?a.yep:a.nope,g=a.load||a.both,h=a.callback,i;c(f),c(g),a.complete&&b.load(a.complete)}var g,h,i=this.yepnope.loader;if(C(a))e(a,0,i,0);else if(A(a))for(g=0;g<a.length;g++)h=a[g],C(h)?e(h,0,i,0):A(h)?H(h):B(h)&&b(h,i);else B(a)&&b(a,i)},H.addPrefix=function(a,b){F[a]=b},H.addFilter=function(a){E.push(a)},H.errorTimeout=1e4,b.readyState==null&&b.addEventListener&&(b.readyState="loading",b.addEventListener("DOMContentLoaded",G=function(){b.removeEventListener("DOMContentLoaded",G,0),b.readyState="complete"},0)),a.yepnope=d()}(this,this.document),Modernizr.load=function(){yepnope.apply(window,[].slice.call(arguments,0))};
.cb-slideshow,
.cb-slideshow:after {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.cb-slideshow:after {
content: '';
background: transparent;
}
.cb-slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 36s linear infinite 0s;
-moz-animation: imageAnimation 36s linear infinite 0s;
-o-animation: imageAnimation 36s linear infinite 0s;
-ms-animation: imageAnimation 36s linear infinite 0s;
animation: imageAnimation 36s linear infinite 0s;
}
.cb-slideshow li div {
z-index: 1000;
position: absolute;
bottom: 30px;
left: 0px;
width: 100%;
text-align: center;
opacity: 0;
color: #fff;
-webkit-animation: titleAnimation 42s linear infinite 0s;
-moz-animation: titleAnimation 42s linear infinite 0s;
-o-animation: titleAnimation 42s linear infinite 0s;
-ms-animation: titleAnimation 42s linear infinite 0s;
animation: titleAnimation 42s linear infinite 0s;
}
.cb-slideshow li div h3 {
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
font-size: 240px;
padding: 0;
line-height: 200px;
}
.cb-slideshow li:nth-child(1) span {
background-image: url(../images/1.jpg)
}
.cb-slideshow li:nth-child(2) span {
background-image: url(../images/2.jpg);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
background-image: url(../images/3.jpg);
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) span {
background-image: url(../images/4.jpg);
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) span {
background-image: url(../images/5.jpg);
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) span {
background-image: url(../images/6.jpg);
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
.cb-slideshow li:nth-child(7) span {
background-image: url(../images/7.jpg);
-webkit-animation-delay: 36s;
-moz-animation-delay: 36s;
-o-animation-delay: 36s;
-ms-animation-delay: 36s;
animation-delay: 36s;
}
.cb-slideshow li:nth-child(8) span {
background-image: url(../images/8.jpg);
-webkit-animation-delay: 42s;
-moz-animation-delay: 42s;
-o-animation-delay: 42s;
-ms-animation-delay: 42s;
animation-delay: 42s;
}
.cb-slideshow li:nth-child(2) div {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) div {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) div {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) div {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) div {
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
.cb-slideshow li:nth-child(7) div {
-webkit-animation-delay: 36s;
-moz-animation-delay: 36s;
-o-animation-delay: 36s;
-ms-animation-delay: 36s;
animation-delay: 36s;
}
.cb-slideshow li:nth-child(8) div {
-webkit-animation-delay: 42s;
-moz-animation-delay: 42s;
-o-animation-delay: 42s;
-ms-animation-delay: 42s;
animation-delay: 42s;
}
/* Animation for the slideshow images */
#-webkit-keyframes imageAnimation {
0% {
opacity: 0;
-webkit-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-webkit-animation-timing-function: ease-out;
}
17% {
opacity: 1
}
25% {
opacity: 0
}
100% {
opacity: 0
}
}
#-moz-keyframes imageAnimation {
0% {
opacity: 0;
-moz-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-moz-animation-timing-function: ease-out;
}
17% {
opacity: 1
}
25% {
opacity: 0
}
100% {
opacity: 0
}
}
#-o-keyframes imageAnimation {
0% {
opacity: 0;
-o-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-o-animation-timing-function: ease-out;
}
17% {
opacity: 1
}
25% {
opacity: 0
}
100% {
opacity: 0
}
}
#-ms-keyframes imageAnimation {
0% {
opacity: 0;
-ms-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-ms-animation-timing-function: ease-out;
}
17% {
opacity: 1
}
25% {
opacity: 0
}
100% {
opacity: 0
}
}
#keyframes imageAnimation {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
8% {
opacity: 1;
animation-timing-function: ease-out;
}
17% {
opacity: 1
}
25% {
opacity: 0
}
100% {
opacity: 0
}
}
/* Animation for the title */
#-webkit-keyframes titleAnimation {
0% {
opacity: 0
}
8% {
opacity: 1
}
17% {
opacity: 1
}
19% {
opacity: 0
}
100% {
opacity: 0
}
}
#-moz-keyframes titleAnimation {
0% {
opacity: 0
}
8% {
opacity: 1
}
17% {
opacity: 1
}
19% {
opacity: 0
}
100% {
opacity: 0
}
}
#-o-keyframes titleAnimation {
0% {
opacity: 0
}
8% {
opacity: 1
}
17% {
opacity: 1
}
19% {
opacity: 0
}
100% {
opacity: 0
}
}
#-ms-keyframes titleAnimation {
0% {
opacity: 0
}
8% {
opacity: 1
}
17% {
opacity: 1
}
19% {
opacity: 0
}
100% {
opacity: 0
}
}
#keyframes titleAnimation {
0% {
opacity: 0
}
8% {
opacity: 1
}
17% {
opacity: 1
}
19% {
opacity: 0
}
100% {
opacity: 0
}
}
/* Show at least something when animations not supported */
.no-cssanimations .cb-slideshow li span {
opacity: 1;
}
#media screen and (max-width: 1140px) {
.cb-slideshow li div h3 {
font-size: 140px
}
}
#media screen and (max-width: 600px) {
.cb-slideshow li div h3 {
font-size: 80px
}
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Oikos Creative Lab / Communication Design</title>
<meta name="description" content="Oikos é un’agenzia di comunicazione e design che offre soluzioni strategiche cross media.">
<link rel="stylesheet" type="text/css" href="CSS3FullscreenSlideshow/css/demo.css" />
<link rel="stylesheet" type="text/css" href="CSS3FullscreenSlideshow/css/style1.css" />
<style type="text/css">
#dati {
float: left;
margin-left: 2%;
color: #FFFDFD;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
text-align: left;
font-size: small;
height: 20px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-top: 5px;
width: 40%;
}
#book {
float: left;
margin-left: 2%;
color: #FFFDFD;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
text-align: left;
font-size: small;
height: 0x;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-top: 5px;
width: 175px;
}
#footer {
float: right;
margin-right: 2%;
color: #FFFDFD;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
text-align: right;
font-size: small;
height: 20px;
width: 250px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-top: 5px;
}
.contenitore {
background-color: #000000;
height: 60px;
width: 100%;
position: absolute;
bottom: 0;
z-index: 9999;
opacity: 0.5;
}
.contenitore #footer a {
color: #808080;
text-decoration: none;
}
.contenitore #footer a:hover {
color: #FFFFFF;
text-decoration: none;
}
</style>
<script type="text/javascript" src="CSS3FullscreenSlideshow/js/modernizr.custom.86080.js"></script>
</head>
<body>
<ul class="cb-slideshow">
<li><span>Image 01</span>
</li>
<li><span>Image 02</span>
</li>
<li><span>Image 03</span>
</li>
<li><span>Image 04</span>
</li>
<li><span>Image 05</span>
</li>
<li><span>Image 06</span>
</li>
<li><span>Image 07</span>
</li>
<li><span>Image 08</span>
</li>
</ul>
<div class="clr"></div>
<div class="contenitore">
<div id="dati">oikos creative lab s.r.l. / via volturno 16 20900 monza mb it
<br>t.+39 0392301644 / info#oikoscreativelab.com
</div>
<div id="book">download our porfolio
<img src="CSS3FullscreenSlideshow/images/acro_ico.png" width="30" height="34" alt="" />
</div>
<div id="footer">c.f. p.iva 09201110963 / r.i. MB-1903327
<br>capitale sociale: € 10.000,00 i.v.</div>
</div>
</body>
</html>

how to make cb slideshow stop after complete 1 loop which have 6 slider images

I have cb-slideshow by using html and css
<ul class="cb-slideshow">
<li><span>Image 01</span><div><h3></h3></div></li>
<li><span>Image 02</span><div><h3></h3></div></li>
<li><span>Image 03</span><div><h3></h3></div></li>
<li><span>Image 04</span><div><h3></h3></div></li>
<li><span>Image 05</span><div><h3></h3></div></li>
<li><span>Image 06</span><div><h3></h3></div></li>
</ul>
But I want stop slides after 1 loop , that mean after complete 1 cycle with all the images.
the css codes are below
.cb-slideshow,
.cb-slideshow:after {
position: absolute;
width: 100%;
height: 484px;
top: 0px;
left: 0px;
z-index: 0;
overflow: hidden;
}
.cb-slideshow:after {
content: '';
background: transparent url(images/pattern.png) repeat top left;
overflow: hidden;
}
.cb-slideshow li span {
width: 100%;
height: 484px;
position: absolute;
top: 15px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 36s linear infinite 0s;
-moz-animation: imageAnimation 36s linear infinite 0s;
-o-animation: imageAnimation 36s linear infinite 0s;
-ms-animation: imageAnimation 36s linear infinite 0s;
animation: imageAnimation 36s linear infinite 0s;
}
.cb-slideshow li div {
z-index: 1000;
position: absolute;
bottom: 30px;
left: 0px;
width: 100%;
text-align: right;
opacity: 0;
-webkit-animation: titleAnimation 36s linear infinite 0s;
-moz-animation: titleAnimation 36s linear infinite 0s;
-o-animation: titleAnimation 36s linear infinite 0s;
-ms-animation: titleAnimation 36s linear infinite 0s;
animation: titleAnimation 36s linear infinite 0s;
}
.cb-slideshow li div h3 {
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
font-size: 160px;
padding: 0 30px;
line-height: 120px;
color: rgba(169,3,41, 0.8);/** OW_Control type:color, key:slidertextColor, section:2. Colors, label: - header slider Text color **/
padding-bottom: 20px;
cursor: crosshair;
}
.cb-slideshow li:nth-child(1) span { background-image: url(images/6.jpg);/** OW_Control type:image, key:slideImage6, section: 0. Header Slides, label: Slide 6 **/ }
.cb-slideshow li:nth-child(2) span {
background-image: url(images/5.jpg);/** OW_Control type:image, key:slideImage5, section: 0. Header Slides, label: Slide 5 **/
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
background-image: url(images/4.jpg);/** OW_Control type:image, key:slideImage4, section: 0. Header Slides, label: Slide 4 **/
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) span {
background-image: url(images/3.jpg);/** OW_Control type:image, key:slideImage3, section: 0. Header Slides, label: Slide 3 **/
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) span {
background-image: url(images/2.jpg);/** OW_Control type:image, key:slideImage2, section: 0. Header Slides, label: Slide 2 **/
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) span {
background-image: url(images/1.jpg);/** OW_Control type:image, key:slideImage1, section: 0. Header Slides, label: Slide 1 **/
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
.cb-slideshow li:nth-child(2) div {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) div {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) div {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) div {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) div {
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
#-webkit-keyframes imageAnimation {
0% {
opacity: 0;
-webkit-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-webkit-transform: scale(1.05);
-webkit-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-webkit-transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
-webkit-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
#-moz-keyframes imageAnimation {
0% {
opacity: 0;
-moz-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-moz-transform: scale(1.05);
-moz-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-moz-transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
-moz-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
#-o-keyframes imageAnimation {
0% {
opacity: 0;
-o-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-o-transform: scale(1.05);
-o-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-o-transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
-o-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
#-ms-keyframes imageAnimation {
0% {
opacity: 0;
-ms-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-ms-transform: scale(1.05);
-ms-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-ms-transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
-ms-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
#keyframes imageAnimation {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
8% {
opacity: 1;
transform: scale(1.05);
animation-timing-function: ease-out;
}
17% {
opacity: 1;
transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
#-webkit-keyframes titleAnimation {
0% {
opacity: 0;
-webkit-transform: translateX(200px);
}
8% {
opacity: 1;
-webkit-transform: translateX(0px);
}
17% {
opacity: 1;
-webkit-transform: translateX(0px);
}
19% {
opacity: 0;
-webkit-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
#-moz-keyframes titleAnimation {
0% {
opacity: 0;
-moz-transform: translateX(200px);
}
8% {
opacity: 1;
-moz-transform: translateX(0px);
}
17% {
opacity: 1;
-moz-transform: translateX(0px);
}
19% {
opacity: 0;
-moz-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
#-o-keyframes titleAnimation {
0% {
opacity: 0;
-o-transform: translateX(200px);
}
8% {
opacity: 1;
-o-transform: translateX(0px);
}
17% {
opacity: 1;
-o-transform: translateX(0px);
}
19% {
opacity: 0;
-o-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
#-ms-keyframes titleAnimation {
0% {
opacity: 0;
-ms-transform: translateX(200px);
}
8% {
opacity: 1;
-ms-transform: translateX(0px);
}
17% {
opacity: 1;
-ms-transform: translateX(0px);
}
19% {
opacity: 0;
-ms-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
#keyframes titleAnimation {
0% {
opacity: 0;
transform: translateX(200px);
}
8% {
opacity: 1;
transform: translateX(0px);
}
17% {
opacity: 1;
transform: translateX(0px);
}
19% {
opacity: 0;
transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
/* Show at least something when animations not supported */
.no-cssanimations .cb-slideshow li span{
opacity: 1;
}
#media screen and (max-width: 1140px) {
.cb-slideshow li div h3 { font-size: 100px }
}
#media screen and (max-width: 600px) {
.cb-slideshow li div h3 { font-size: 50px }
}

Right now in the CSS you are setting the animation-iteration-count to infinite, so the animation is looping all the time. If you want the animation to stop the slides after one loop only, then set the value of animation-iteration-count to 1.
You would just need to change these two rules and that should do it:
.cb-slideshow li span {
width: 100%;
height: 484px;
position: absolute;
top: 15px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 36s linear 1 0s;
-moz-animation: imageAnimation 36s linear 1 0s;
-o-animation: imageAnimation 36s linear 1 0s;
-ms-animation: imageAnimation 36s linear 1 0s;
animation: imageAnimation 36s linear 1 0s;
}
.cb-slideshow li div {
z-index: 1000;
position: absolute;
bottom: 30px;
left: 0px;
width: 100%;
text-align: right;
opacity: 0;
-webkit-animation: titleAnimation 36s linear 1 0s;
-moz-animation: titleAnimation 36s linear 1 0s;
-o-animation: titleAnimation 36s linear 1 0s;
-ms-animation: titleAnimation 36s linear 1 0s;
animation: titleAnimation 36s linear 1 0s;
}

Bouncing effect using css3 keyframes animation

I am trying bouncing effect using css3 key-frame animation.
here is fiddle link: click
Background of box is changing but my requirement is to give bouncing effect to background image not background color.
What exactly I need: A bouncing(jumping) teddy on trampoline with two states:
(1. with arms up, 2. with arms down) while jumping.
Any ideas how to achieve it? Thank you!

I got solution for this:
.margin{
margin-top:200px;
}
}
/* keyframes definition for WebKit browsers */
#-webkit-keyframes travel {
from { right: 10px; }
to { right: 10px; }
}
#-webkit-keyframes bounce {
from, to {
bottom: 40px;
-webkit-animation-timing-function: ease-out;
}
50% {
bottom: 140px;
-webkit-animation-timing-function: ease-in;
}
}
#-webkit-keyframes bounce1 {
from, to {
bottom: 40px;
-webkit-animation-timing-function: ease-out;
}
50% {
bottom: 140px;
z-index:9;
-webkit-animation-timing-function: ease-in;
}
}
/* keyframes definition for other browsers */
#keyframes travel {
from { right: 10px; }
to { right: 10px; }
}
#keyframes bounce {
from, to {
bottom: 45px;
animation-timing-function: ease-out;
}
50% {
bottom: 140px;
animation-timing-function: ease-in;
}
}
#keyframes bounce1 {
from, to {
bottom: 45px;
animation-timing-function: ease-out;
}
50% {
bottom: 140px;
z-index:9;
animation-timing-function: ease-in;
}
}
/* styles for the stage and animated elements */
#traveler {
position: absolute;
width: 75px;
height: 100px;
-webkit-animation-name: travel;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-duration:2.8s;
animation-name: travel;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-duration: 2.8s;
}
#bouncer {
position: absolute;
width: 75px;
z-index:10;
height: 100px;
border-radius: 10px;
/*background: url(../img/jump.png) no-repeat;*/
background:green;
-webkit-animation-name: bounce;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 2.2s;
animation-name: bounce;
animation-iteration-count: infinite;
animation-duration: 2.2s;
}
#bouncer2 {
position: absolute;
z-index:11;
width: 75px;
height: 100px;
border-radius: 10px;
/*background: url(../img/pyonpyon.png) no-repeat;*/
background:red;
-webkit-animation-name: bounce1;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 2.2s;
animation-name: bounce1;
animation-iteration-count: infinite;
animation-duration: 2.2s;
}
<div class="margin">
<div id="traveler">
<div id="bouncer"> </div>
<div id="bouncer2"> </div>
</div>
</div>
Fiddle example: https://jsfiddle.net/Sharan_thethy/eyjkpy8u/
Thank you

Categories