Animations are slowing the performance of web page - javascript
I have a single page website design in html, javascript and css. There are lots of images on the webpage and all have different-different animation effects according to their categories. I have used wow.js for animation effects on window scroll. While scroll through images, CPU and GPU usage is going very high, due its effect the scrolling is jerky, not smooth. Could anyone please look into this. I have created a codepen example. Please have a look:-
(https://codepen.io/Sny220/pen/jjyEPj)
Code below:-
<!-- HTML -->
<div class="foo foo-text foo-2 col-md-3 col-md-offset-3 over-hidden">
<img class="wow zoominoutsingle" src="https://www.psychologies.co.uk/sites/default/files/field/image/feelgood%20chemicals.jpg" />
</div>
<div class="foo foo-text foo-2 col-md-3 over-hidden">
<img class="wow zoominoutsingle" src="https://kajabi-storefronts-production.global.ssl.fastly.net/kajabi-storefronts-production/blogs/1049/images/BlH7rBrRFGdVF71lofox_TFmaDj07ReWp5C4zcHaw_alex-fergus-look-and-feel-amazing-health-wellness-fat-loss-natural-banner.jpg" />
</div>
<div class="foo foo-text foo-2 col-md-6 col-md-offset-3">
<div class="inner">
<h1 class="wow fadeInDown">Hello, world!</h1>
<p class="wow fadeInUp">Whouaa !!!</p>
</div>
</div>
<div class="foo foo-3 col-md-6 col-md-offset-3">
<div class="inner">
<button type="button" class="btn btn-success">Success</button>
</div>
</div>
<div class="foo foo-4 col-md-6 col-md-offset-3 wow fadeInDown">
<img class="" src="http://www.ponpokopon.net/livresillu/unenouvellemaison1.jpg" />
</div>
<div class="foo foo-5 col-md-6 col-md-offset-3">
<div class="inner">RUBRIQUE 3</div>
</div>
<div data-wow-duration="2s" class="foo foo-1 col-md-3 col-md-offset-3 wow scale-in-ver-top">
<div class="inner">
<img class="" src="http://www.ponpokopon.net/livresillu/unenouvellemaison2.jpg" />
</div>
</div>
<div data-wow-duration="2s" class="foo foo-2 col-md-3 wow scale-in-ver-top">
<div class="inner"><img class="" src="https://media.treehugger.com/assets/images/2018/07/nature-benefits.jpg.860x0_q70_crop-scale.jpg" /></div>
</div>
<div data-wow-duration="2s" class="col-md-3 col-md-offset-3 margin-top-20 swing">
<div class="inner"><img class="wow swing-in-top-fwd" src="https://www.thewaltdisneycompany.com/wp-content/uploads/ENVIRONMENT_header-option_Disney_Conservation_Fund_0348HC.jpg" /></div>
</div>
<div class="col-md-6 col-md-offset-3 bg-color">
<h1 class="wow fadeInDown">Next Section</h1>
</div>
<!-- HTML -->
<div class="foo foo-text foo-2 col-md-3 col-md-offset-3 over-hidden">
<img class="wow zoominoutsingle" src="https://www.psychologies.co.uk/sites/default/files/field/image/feelgood%20chemicals.jpg" />
</div>
<div class="foo foo-text foo-2 col-md-3 over-hidden">
<img class="wow zoominoutsingle" src="https://kajabi-storefronts-production.global.ssl.fastly.net/kajabi-storefronts-production/blogs/1049/images/BlH7rBrRFGdVF71lofox_TFmaDj07ReWp5C4zcHaw_alex-fergus-look-and-feel-amazing-health-wellness-fat-loss-natural-banner.jpg" />
</div>
<div class="foo foo-text foo-2 col-md-6 col-md-offset-3">
<div class="inner">
<h1 class="wow fadeInDown">Hello, world!</h1>
<p class="wow fadeInUp">Whouaa !!!</p>
</div>
</div>
<div class="foo foo-3 col-md-6 col-md-offset-3">
<div class="inner">
<button type="button" class="btn btn-success">Success</button>
</div>
</div>
<div class="foo foo-4 col-md-6 col-md-offset-3 wow fadeInDown">
<img class="" src="http://www.ponpokopon.net/livresillu/unenouvellemaison1.jpg" />
</div>
<div class="foo foo-5 col-md-6 col-md-offset-3">
<div class="inner">RUBRIQUE 3</div>
</div>
<div data-wow-duration="2s" class="foo foo-1 col-md-3 col-md-offset-3 wow scale-in-ver-top">
<div class="inner">
<img class="" src="http://www.ponpokopon.net/livresillu/unenouvellemaison2.jpg" />
</div>
</div>
<div data-wow-duration="2s" class="foo foo-2 col-md-3 wow scale-in-ver-top">
<div class="inner"><img class="" src="https://media.treehugger.com/assets/images/2018/07/nature-benefits.jpg.860x0_q70_crop-scale.jpg" /></div>
</div>
<div data-wow-duration="2s" class="col-md-3 col-md-offset-3 margin-top-20 swing">
<div class="inner"><img class="wow swing-in-top-fwd" src="https://www.thewaltdisneycompany.com/wp-content/uploads/ENVIRONMENT_header-option_Disney_Conservation_Fund_0348HC.jpg" /></div>
</div>
<div class="col-md-6 col-md-offset-3 bg-color">
<h1 class="wow fadeInDown">Next Section</h1>
</div>
<!-- HTML -->
<div class="foo foo-text foo-2 col-md-3 col-md-offset-3 over-hidden">
<img class="wow zoominoutsingle" src="https://www.psychologies.co.uk/sites/default/files/field/image/feelgood%20chemicals.jpg" />
</div>
<div class="foo foo-text foo-2 col-md-3 over-hidden">
<img class="wow zoominoutsingle" src="https://kajabi-storefronts-production.global.ssl.fastly.net/kajabi-storefronts-production/blogs/1049/images/BlH7rBrRFGdVF71lofox_TFmaDj07ReWp5C4zcHaw_alex-fergus-look-and-feel-amazing-health-wellness-fat-loss-natural-banner.jpg" />
</div>
<div class="foo foo-text foo-2 col-md-6 col-md-offset-3">
<div class="inner">
<h1 class="wow fadeInDown">Hello, world!</h1>
<p class="wow fadeInUp">Whouaa !!!</p>
</div>
</div>
<div class="foo foo-3 col-md-6 col-md-offset-3">
<div class="inner">
<button type="button" class="btn btn-success">Success</button>
</div>
</div>
<div class="foo foo-4 col-md-6 col-md-offset-3 wow fadeInDown">
<img class="" src="http://www.ponpokopon.net/livresillu/unenouvellemaison1.jpg" />
</div>
<div class="foo foo-5 col-md-6 col-md-offset-3">
<div class="inner">RUBRIQUE 3</div>
</div>
<div data-wow-duration="2s" class="foo foo-1 col-md-3 col-md-offset-3 wow scale-in-ver-top">
<div class="inner">
<img class="" src="http://www.ponpokopon.net/livresillu/unenouvellemaison2.jpg" />
</div>
</div>
<div data-wow-duration="2s" class="foo foo-2 col-md-3 wow scale-in-ver-top">
<div class="inner"><img class="" src="https://media.treehugger.com/assets/images/2018/07/nature-benefits.jpg.860x0_q70_crop-scale.jpg" /></div>
</div>
<div data-wow-duration="2s" class="col-md-3 col-md-offset-3 margin-top-20 swing">
<div class="inner"><img class="wow swing-in-top-fwd" src="https://www.thewaltdisneycompany.com/wp-content/uploads/ENVIRONMENT_header-option_Disney_Conservation_Fund_0348HC.jpg" /></div>
</div>
<div class="col-md-6 col-md-offset-3 bg-color">
<h1 class="wow fadeInDown">Next Section</h1>
</div>
<!-- HTML -->
<div class="foo foo-text foo-2 col-md-3 col-md-offset-3">
<img class="wow scale-in-ver-top" src="https://www.psychologies.co.uk/sites/default/files/field/image/feelgood%20chemicals.jpg" />
</div>
<div class="foo foo-text foo-2 col-md-3">
<img class="wow scale-in-ver-top" src="https://kajabi-storefronts-production.global.ssl.fastly.net/kajabi-storefronts-production/blogs/1049/images/BlH7rBrRFGdVF71lofox_TFmaDj07ReWp5C4zcHaw_alex-fergus-look-and-feel-amazing-health-wellness-fat-loss-natural-banner.jpg" />
</div>
<div class="foo foo-text foo-2 col-md-6 col-md-offset-3">
<div class="inner">
<h1 class="wow fadeInDown">Hello, world!</h1>
<p class="wow fadeInUp">Whouaa !!!</p>
</div>
</div>
<div class="foo foo-3 col-md-6 col-md-offset-3">
<div class="inner">
<button type="button" class="btn btn-success">Success</button>
</div>
</div>
<div class="foo foo-4 col-md-6 col-md-offset-3 wow fadeInDown">
<img class="" src="http://www.ponpokopon.net/livresillu/unenouvellemaison1.jpg" />
</div>
<div class="foo foo-5 col-md-6 col-md-offset-3">
<div class="inner">RUBRIQUE 3</div>
</div>
<div data-wow-duration="2s" class="foo foo-1 col-md-3 col-md-offset-3 wow scale-in-ver-top">
<div class="inner">
<img class="" src="http://www.ponpokopon.net/livresillu/unenouvellemaison2.jpg" />
</div>
</div>
<div data-wow-duration="2s" class="foo foo-2 col-md-3 wow scale-in-ver-top">
<div class="inner"><img class="" src="https://media.treehugger.com/assets/images/2018/07/nature-benefits.jpg.860x0_q70_crop-scale.jpg" /></div>
</div>
<div data-wow-duration="2s" class="col-md-3 col-md-offset-3 margin-top-20 swing">
<div class="inner"><img class="wow swing-in-top-fwd" src="https://www.thewaltdisneycompany.com/wp-content/uploads/ENVIRONMENT_header-option_Disney_Conservation_Fund_0348HC.jpg" /></div>
</div>
<div class="col-md-6 col-md-offset-3 bg-color">
<h1 class="wow fadeInDown">Next Section</h1>
</div>
<!-- HTML -->
<div class="foo foo-text foo-2 col-md-3 col-md-offset-3">
<img class="wow scale-in-ver-top" src="https://www.psychologies.co.uk/sites/default/files/field/image/feelgood%20chemicals.jpg" />
</div>
<div class="foo foo-text foo-2 col-md-3">
<img class="wow scale-in-ver-top" src="https://kajabi-storefronts-production.global.ssl.fastly.net/kajabi-storefronts-production/blogs/1049/images/BlH7rBrRFGdVF71lofox_TFmaDj07ReWp5C4zcHaw_alex-fergus-look-and-feel-amazing-health-wellness-fat-loss-natural-banner.jpg" />
</div>
<div class="foo foo-text foo-2 col-md-6 col-md-offset-3">
<div class="inner">
<h1 class="wow fadeInDown">Hello, world!</h1>
<p class="wow fadeInUp">Whouaa !!!</p>
</div>
</div>
<div class="foo foo-3 col-md-6 col-md-offset-3">
<div class="inner">
<button type="button" class="btn btn-success">Success</button>
</div>
</div>
<div class="foo foo-4 col-md-6 col-md-offset-3 wow fadeInDown">
<img class="" src="http://www.ponpokopon.net/livresillu/unenouvellemaison1.jpg" />
</div>
<div class="foo foo-5 col-md-6 col-md-offset-3">
<div class="inner">RUBRIQUE 3</div>
</div>
<div data-wow-duration="2s" class="foo foo-1 col-md-3 col-md-offset-3 wow scale-in-ver-top">
<div class="inner">
<img class="" src="http://www.ponpokopon.net/livresillu/unenouvellemaison2.jpg" />
</div>
</div>
<div data-wow-duration="2s" class="foo foo-2 col-md-3 wow scale-in-ver-top">
<div class="inner"><img class="" src="https://media.treehugger.com/assets/images/2018/07/nature-benefits.jpg.860x0_q70_crop-scale.jpg" /></div>
</div>
<div data-wow-duration="2s" class="col-md-3 col-md-offset-3 margin-top-20 swing">
<div class="inner"><img class="wow swing-in-top-fwd" src="https://www.thewaltdisneycompany.com/wp-content/uploads/ENVIRONMENT_header-option_Disney_Conservation_Fund_0348HC.jpg" /></div>
</div>
body {
padding-top: 20px;
}
/* set colors*/
:root {
--color-1: forestgreen;
--color-2: lightskyblue;
--color-3: darksalmon;
--color-4: palegoldenrod;
--color-5: mediumvioletred;
}
img {
width: 100%;
}
.foo {
margin-bottom: 10px;
color: white;
}
.navbar {}
.foo .inner {
padding: 5px;
min-height: 20vh;
}
.foo-text .inner {
min-height: 60vh !important;
}
/* apply colors */
.foo-1 .inner {
background-color: var(--color-1);
}
.foo-2 .inner {
background-color: var(--color-2);
}
.foo-3 .inner {
background-color: var(--color-3);
}
.foo-4 .inner {
background-color: var(--color-4);
}
.foo-5 .inner {
background-color: var(--color-5);
}
.bg-color {
background-color: var(--color-5);
color: #fff;
margin-top: 20px;
margin-bottom: 20px;
}
.over-hidden {
overflow: hidden;
}
.swing {
overflow: hidden;
}
.scale-in-ver-top {
-webkit-animation: scale-in-ver-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: scale-in-ver-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
#-webkit-keyframes scale-in-ver-top {
0% {
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
opacity: 1;
}
100% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
opacity: 1;
}
}
#keyframes scale-in-ver-top {
0% {
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
opacity: 1;
}
100% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
opacity: 1;
}
}
.swing-in-top-fwd {
-webkit-animation-name: swing-in-top-fwd;
animation-name: swing-in-top-fwd;
}
#-webkit-keyframes swing-in-top-fwd {
0% {
-webkit-transform: rotateX(-100deg);
transform: rotateX(-100deg);
-webkit-transform-origin: top;
transform-origin: top;
opacity: 0;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
}
100% {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
-webkit-transform-origin: top;
transform-origin: top;
opacity: 1;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
}
}
#keyframes swing-in-top-fwd {
0% {
-webkit-transform: rotateX(-100deg);
transform: rotateX(-100deg);
-webkit-transform-origin: top;
transform-origin: top;
opacity: 0;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
}
100% {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
-webkit-transform-origin: top;
transform-origin: top;
opacity: 1;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
}
}
#keyframes zoominoutsinglefeatured {
0% {
transform: scale(1, 1);
webkit-transform: scale(1, 1);
}
50% {
transform: scale(2, 2);
webkit-transform: scale(2, 2);
}
100% {
transform: scale(1, 1);
webkit-transform: scale(1, 1);
}
}
.zoominoutsingle {
animation-name: zoominoutsinglefeatured;
webkit-animation-name: zoominoutsinglefeatured;
-webkit-animation-duration: 10s;
animation-duration: 10s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
wow = new WOW();
wow.init();
$(".foo-5").hover(function(e) {
$(this).addClass('animated pulse');
}, function(e) {
$(this).removeClass('animated pulse');
});
var $animation_elements = $('.wow');
var $window = $(window);
function check_if_in_view() {
var window_height = $window.height();
var window_top_position = $window.scrollTop();
var window_bottom_position = (window_top_position + window_height);
$.each($animation_elements, function() {
var $element = $(this);
var element_height = $element.outerHeight();
var element_top_position = $element.offset().top;
var element_bottom_position = (element_top_position + element_height);
//check to see if this current container is within viewport
if ((element_bottom_position >= window_top_position) &&
(element_top_position <= window_bottom_position)) {
$element.removeClass('animated');
$element.addClass('animated');
} else {
$element.css({
'visibility': 'hidden',
'animation-name': 'none'
}).removeClass('animated');
wow.addBox(this);
}
});
}
WOW.prototype.addBox = function(element) {
this.boxes.push(element);
};
$window.on('scroll resize', check_if_in_view);
update:- This is just an example that i am using in webpage. Web page
has different number of sections apporx. 20 sections and all are
having 10 or more images. So when we are running that much images with
animations the performance goes down.
I have checked it on mac Safari 11 & 12, the animation and scroll is
not smooth. There is jerkiness while scrolling and animations are very
slow with jerks.
You can probably gain a lot of performance by using Intersection Observer (IO) instead of listening to the scroll event. IO was introduced because listening to the scroll event and calculating height/width of elements results in poor performance.
First you have to create a new observer:
var options = {
rootMargin: '0px',
threshold: 1.0
}
var observer = new IntersectionObserver(callback, options);
Here we specify that once the observed element is 100% visible, some callback should be executed.
Then you have to specify which items to observe, in your case I think this would be:
var target = document.querySelector('.wow');
observer.observe(target);
So we define that once any element with the class "wow" is visible on the page, the callback is getting executed:
var callback = function(entries, observer) {
entries.forEach(entry => {
// Each entry describes an intersection change for one observed
// target element:
});
};
Here you specify what should happen for each "wow"-Element in your page that is getting visible.
If you are using CSS for your animations and not JS then the animations should now be smooth.
It also depends on what parameters you are animating, here is a good list of properties to avoid animating with CSS.
I won't copy the whole list here, but the most important ones would be padding, width, height and position.
Edit:
If you need to support older browsers than use this (official) polyfill from w3c, it recreates intersection observer with listening to scroll events. So it will still be slower on older browsers, nothing you can do about it here. But on newer ones there will be an increase in performance.
You can use lazy loading for animations and perform in a better way the loading of view elements.
JQuery Lazy
Since it looks like you're only using animated pulse, and are already adding and removing the animated class, I'd highly suggest using CSS animations.
CSS animations are rendered with the GPU and do not use the main thread like JavaScript does. They're super smooth and performant!
Check out this Codepen I found on Google creating a pulsing animated icon: https://codepen.io/igorsheg/pen/MBpwGw
Related
How to turn a container div into content slider
I'm working with Bootstrap 3 and I have made this div:
<div class="second-para">
<div class="container">
<div class="second-section">
<div class="container mt-2">
<div class="row">
<div class="col-md-3 col-sm-6 section-two-title">
<h1 class="text-center m-0 py-2">
Newest
</h1>
<h1 class="text-center m-0 py-2">
Courses
</h1>
</div>
<div class="col-md-3 col-sm-6 item">
<div class="card item-card card-block card-section">
<img src="https://static.pexels.com/photos/7096/people-woman-coffee-meeting.jpg" alt="Photo of sunset">
<h5 class="item-card-title mt-3 mb-3">Sierra Web Development • Owner</h5>
<p class="card-text">This is a company that builds websites, web apps and e-commerce solutions.</p>
</div>
</div>
<div class="col-md-3 col-sm-6 item">
<div class="card item-card card-block card-section">
<img src="https://static.pexels.com/photos/7357/startup-photos.jpg" alt="Photo of sunset">
<h5 class="card-title mt-3 mb-3">ProVyuh</h5>
<p class="card-text">This is a company that builds websites, web .</p>
</div>
</div>
<div class="col-md-3 col-sm-6 item">
<div class="card item-card card-block card-section">
<img src="https://static.pexels.com/photos/262550/pexels-photo-262550.jpeg" alt="Photo of sunset">
<h5 class="card-title mt-3 mb-3">ProVyuh</h5>
<p class="card-text">This is a company that builds websites, web apps and e-commerce solutions.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
And the result looks like this:
But as I mentioned out in the image, I need to add two icons at the right and left of the cards in order to browse more courses.
So it would be a dynamic content slider.
But I don't know how to do that, so I would really appreciate if you could help me with this...
And here is also the CSS part:
.second-para{
height:500px;
background-color: #ffcc32 !important;
}
.second-section, .third-section, .fourth-section{
padding-top:100px;
}
.card-section{
border-radius: 2%;
}
.second-section img, .third-section img, .fourth-section img{
height:150px;
width:100%;
}
.second-section .item, .third-section .item, .fourth-section .item{
padding-left:5px;
padding-right:5px;
}
.second-section .item-card, .third-section .item-card, .fourth-section .item-card{
transition:0.5s;
cursor:pointer;
}
.second-section .item-card-title, .third-section .item-card-title, .fourth-section .item-card-title{
font-size:15px;
transition:1s;
cursor:pointer;
}
.second-section .item-card-title i, .third-section .item-card-title, .fourth-section .item-card-title{
font-size:15px;
transition:1s;
cursor:pointer;
color:#ffa710
}
.second-section .card-title i:hover,.third-section .card-title i:hover,.fourth-section .card-title i:hover{
transform: scale(1.25) rotate(100deg);
color:#18d4ca;
}
.second-section .card:hover,.third-section .card:hover,.fourth-section .card:hover{
transform: scale(1.05);
box-shadow: 10px 10px 15px rgba(0,0,0,0.3);
}
.second-section .card-text,.third-section .card-text,.fourth-section .card-text{
height:80px;
}
.second-section .card::before, .card::after,.third-section .card::before,.fourth-section .card::before, .card::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: scale3d(0, 0, 1);
transition: transform .3s ease-out 0s;
background: rgba(255, 255, 255, 0.1);
content: '';
pointer-events: none;
}
.second-section .card::before,.third-section .card::before,.fourth-section .card::before {
transform-origin: left top;
}
.second-section .card::after,.third-section .card::after {
transform-origin: right bottom;
}
.second-section .card:hover::before, .card:hover::after, .card:focus::before, .card:focus::after,.third-section .card:hover::before {
transform: scale3d(1, 1, 1);
}
.section-two-title, .section-three-title,.section-fourth-title{
padding-top:5%;
}
.section-two-title h1, .section-three-title h1, .section-fourth-title h1{
font-size:30px !important;
}
As mentioned, you can use Bootstrap's Carousel
You need custom code, however, to show multiple cards at once: Bootstrap carousel multiple frames at once
See this CodePly for another example: https://www.codeply.com/p/0CWffz76Q9
/* https://stackoverflow.com/a/20008623 */
let items = document.querySelectorAll('.carousel .carousel-item')
window.addEventListener('resize', initCarousel);
initCarousel();
function initCarousel() {
items.forEach((el) => {
// number of slides per carousel-item
const minPerSlide = getMinSlides();
let next = el.nextElementSibling
for (var i = 1; i < minPerSlide; i++) {
if (!next) {
// wrap carousel by using first child
next = items[0]
}
let cloneChild = next.cloneNode(true)
el.appendChild(cloneChild.children[0])
next = next.nextElementSibling
}
})
}
function getMinSlides() {
// https://stackoverflow.com/a/8876069
const width = Math.max(
document.documentElement.clientWidth,
window.innerWidth || 0
)
if (width < 576) return 1
if (width < 768) return 2
return 4
}
.second-para {
height: 500px;
background-color: #ffcc32 !important;
}
.second-section,
.third-section,
.fourth-section {
padding-top: 100px;
}
.card-section {
border-radius: 2%;
}
.second-section img,
.third-section img,
.fourth-section img {
height: 150px;
width: 100%;
}
.second-section .item,
.third-section .item,
.fourth-section .item {
padding-left: 5px;
padding-right: 5px;
}
.second-section .item-card,
.third-section .item-card,
.fourth-section .item-card {
transition: 0.5s;
cursor: pointer;
}
.second-section .item-card-title,
.third-section .item-card-title,
.fourth-section .item-card-title {
font-size: 15px;
transition: 1s;
cursor: pointer;
}
.second-section .item-card-title i,
.third-section .item-card-title,
.fourth-section .item-card-title {
font-size: 15px;
transition: 1s;
cursor: pointer;
color: #ffa710
}
.second-section .card-title i:hover,
.third-section .card-title i:hover,
.fourth-section .card-title i:hover {
transform: scale(1.25) rotate(100deg);
color: #18d4ca;
}
.second-section .card:hover,
.third-section .card:hover,
.fourth-section .card:hover {
transform: scale(1.05);
box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);
}
.second-section .card-text,
.third-section .card-text,
.fourth-section .card-text {
height: 80px;
}
.second-section .card::before,
.card::after,
.third-section .card::before,
.fourth-section .card::before,
.card::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: scale3d(0, 0, 1);
transition: transform .3s ease-out 0s;
background: rgba(255, 255, 255, 0.1);
content: '';
pointer-events: none;
}
.second-section .card::before,
.third-section .card::before,
.fourth-section .card::before {
transform-origin: left top;
}
.second-section .card::after,
.third-section .card::after {
transform-origin: right bottom;
}
.second-section .card:hover::before,
.card:hover::after,
.card:focus::before,
.card:focus::after,
.third-section .card:hover::before {
transform: scale3d(1, 1, 1);
}
.section-two-title,
.section-three-title,
.section-fourth-title {
padding-top: 5%;
}
.section-two-title h1,
.section-three-title h1,
.section-fourth-title h1 {
font-size: 30px !important;
}
/* More Carousel code */
.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
display: flex;
}
/* https://stackoverflow.com/a/20008623 */
#media (min-width: 576px) {
.carousel-inner .carousel-item-end.active,
.carousel-inner .carousel-item-next {
transform: translateX(50%);
}
.carousel-inner .carousel-item-start.active,
.carousel-inner .carousel-item-prev {
transform: translateX(-50%);
}
}
#media (min-width: 768px) {
.carousel-inner .carousel-item-end.active,
.carousel-inner .carousel-item-next {
transform: translateX(25%);
}
.carousel-inner .carousel-item-start.active,
.carousel-inner .carousel-item-prev {
transform: translateX(-25%);
}
}
.carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start {
transform: translateX(0);
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<div class="second-para">
<div class="container">
<div class="second-section">
<div class="container mt-2">
<h1 class="text-center m-0 py-2">
Newest Courses
</h1>
<div class="row">
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="col-md-3 col-sm-6 item">
<div class="card item-card card-block card-section">
<img src="https://static.pexels.com/photos/7096/people-woman-coffee-meeting.jpg" alt="Photo of sunset">
<h5 class="item-card-title mt-3 mb-3">Sierra Web Development • Owner</h5>
<p class="card-text">This is a company that builds websites, web apps and e-commerce solutions.</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3 col-sm-6 item">
<div class="card item-card card-block card-section">
<img src="https://static.pexels.com/photos/7357/startup-photos.jpg" alt="Photo of sunset">
<h5 class="card-title mt-3 mb-3">ProVyuh</h5>
<p class="card-text">This is a company that builds websites, web .</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3 col-sm-6 item">
<div class="card item-card card-block card-section">
<img src="https://static.pexels.com/photos/262550/pexels-photo-262550.jpeg" alt="Photo of sunset">
<h5 class="card-title mt-3 mb-3">ProVyuh</h5>
<p class="card-text">This is a company that builds websites, web apps and e-commerce solutions.</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3 col-sm-6 item">
<div class="card item-card card-block card-section">
<img src="https://static.pexels.com/photos/7096/people-woman-coffee-meeting.jpg" alt="Photo of sunset">
<h5 class="item-card-title mt-3 mb-3">Sierra Web Development • Owner</h5>
<p class="card-text">This is a company that builds websites, web apps and e-commerce solutions.</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3 col-sm-6 item">
<div class="card item-card card-block card-section">
<img src="https://static.pexels.com/photos/7357/startup-photos.jpg" alt="Photo of sunset">
<h5 class="card-title mt-3 mb-3">ProVyuh</h5>
<p class="card-text">This is a company that builds websites, web .</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3 col-sm-6 item">
<div class="card item-card card-block card-section">
<img src="https://static.pexels.com/photos/262550/pexels-photo-262550.jpeg" alt="Photo of sunset">
<h5 class="card-title mt-3 mb-3">ProVyuh</h5>
<p class="card-text">This is a company that builds websites, web apps and e-commerce solutions.</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3 col-sm-6 item">
<div class="card item-card card-block card-section">
<img src="https://static.pexels.com/photos/7096/people-woman-coffee-meeting.jpg" alt="Photo of sunset">
<h5 class="item-card-title mt-3 mb-3">Sierra Web Development • Owner</h5>
<p class="card-text">This is a company that builds websites, web apps and e-commerce solutions.</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3 col-sm-6 item">
<div class="card item-card card-block card-section">
<img src="https://static.pexels.com/photos/7357/startup-photos.jpg" alt="Photo of sunset">
<h5 class="card-title mt-3 mb-3">ProVyuh</h5>
<p class="card-text">This is a company that builds websites, web .</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3 col-sm-6 item">
<div class="card item-card card-block card-section">
<img src="https://static.pexels.com/photos/262550/pexels-photo-262550.jpeg" alt="Photo of sunset">
<h5 class="card-title mt-3 mb-3">ProVyuh</h5>
<p class="card-text">This is a company that builds websites, web apps and e-commerce solutions.</p>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
Changing image on hover the text
There are 4 texts. When I hover on each of them I can see a certain picture which belongs to certain text.
The question is that, I need a slider consist of images. I mean when I hover on text1 I need to see my image and after one second this image has to disappear.
So, I need to do it with all texts, but in my code I just can see one image, apart from it is not a slider. Can you help me in this question?
This is the code:
.pic {
background-image: url(img/scr-img/1.png);
width: 236px;
height: 420px;
transition: 1s;
background-size: cover;
}
p1:hover~.pic {
background-image: url(img/scr-img/8.png);
}
p2:hover~.pic {
background-image: url(img/scr-img/9.png);
}
p3:hover~.pic {
background-image: url(img/scr-img/11.png);
}
p4:hover~.pic {
background-image: url(img/scr-img/5.png);
}
<p1 style="cursor: pointer; font-size: 24px; color: #1A264A;">
<div class="col-md-4 col-lg-4 col-sm-6 col-xs-12">
<div class="download-content sm-center xs-center xs-mb50 xs-font wow fadeIn">
<p>Text1</p>
</div>
</div>
</p1>
<p2 style="cursor: pointer; font-size: 24px; color: #1A264A;">
<div class="col-md-4 col-lg-4 col-md-offset-4 col-lg-offset-4 col-sm-6 col-xs-12">
<div class="download-content sm-center xs-center wow fadeIn">
<p>Text2</p><br><br><br>
</div>
</div>
</p2>
<div class="pic" style="border-radius: 20px;"></div>
<p3 style="cursor: pointer; font-size: 24px; color: #1A264A;">
<div class="col-md-4 col-lg-4 col-sm-6 col-xs-12">
<div class="download-content sm-center xs-center xs-mb50 xs-font wow fadeIn">
<p>Text3</p>
</div>
</div>
</p3>
<p4 style="cursor: pointer; font-size: 24px; color: #1A264A;">
<div class="col-md-4 col-lg-4 col-md-offset-4 col-lg-offset-4 col-sm-6 col-xs-12">
<div class="download-content sm-center xs-center wow fadeIn">
<p>Text4</p>
</div>
</div>
</p4>
This would not be like a slider but inside of pic div we can change images when Texts are hovered.
I assume that we have all the required images in folder img/src-img and img folder is in the same directory where the html page exists.
Below code is working fine in Chrome
.pic {
background-image: url(img/scr-img/1.png);
width: 236px;
height: 420px;
transition: 1s;
background-size: cover;
}
p1:hover~.pic {
background-image: url(img/scr-img/8.png);
}
p2:hover~.pic {
background-image: url(img/scr-img/9.png);
}
p3:hover~.pic {
background-image: url(img/scr-img/11.png);
}
p4:hover~.pic {
background-image: url(img/scr-img/5.png);
}
<p1 style="cursor: pointer; font-size: 24px; color: #1A264A;">
<div class="col-md-4 col-lg-4 col-sm-6 col-xs-12">
<div class="download-content sm-center xs-center xs-mb50 xs-font wow fadeIn">
<p>Text1</p>
</div>
</div>
</p1>
<p2 style="cursor: pointer; font-size: 24px; color: #1A264A;">
<div class="col-md-4 col-lg-4 col-md-offset-4 col-lg-offset-4 col-sm-6 col-xs-12">
<div class="download-content sm-center xs-center wow fadeIn">
<p>Text2</p><br><br><br>
</div>
</div>
</p2>
<p3 style="cursor: pointer; font-size: 24px; color: #1A264A;">
<div class="col-md-4 col-lg-4 col-sm-6 col-xs-12">
<div class="download-content sm-center xs-center xs-mb50 xs-font wow fadeIn">
<p>Text3</p>
</div>
</div>
</p3>
<p4 style="cursor: pointer; font-size: 24px; color: #1A264A;">
<div class="col-md-4 col-lg-4 col-md-offset-4 col-lg-offset-4 col-sm-6 col-xs-12">
<div class="download-content sm-center xs-center wow fadeIn">
<p>Text4</p>
</div>
</div>
</p4>
<div class="pic" style="border-radius: 20px;"></div>
How to get a bootstrap card to flip and stay flipped using css and javascript?
I am using Vue, css and JavaScript. I am able to get a specific card to flip when a I hold down the button, but the desired behavior would be that when pressing the button (not holding) the card would flip and reveal the back of the card, then from the back pressing the button you can flip the card again to the front. I've tried implementing this feature with Vue and css only but I could not accomplish it, so I decided to use vanilla Javascript and use onclick event. I have gut feeling that it's my css that's causing this issue but I've experimented quite a bit and can't figure it out. Help or recommendations would be appreciated, only looking to use Vue, vanilla JavaScript, and css. I am sorta new to Vue and css animations/transitions.
new Vue({
el: "#CardsApp",
data: {
cards: [],
isFetchingData: false
},
created: function() {
this.isFetchingData = true;
let vm = this;
axios.get("http://localhost:52007/api/cards")
.then(response => {
vm.cards = response.data.slice()
vm.isFetchingData = false;
})
}
})
.card-title {
font-family: getSchwifty, sans-serif;
font-size: 1.6rem;
color: greenyellow;
text-align: center;
}
.card-text {
font-size: 1.2rem;
}
#loadingImg {
margin-bottom: 30vmin;
}
.card-flip {
-webkit-perspective: 1000px;
perspective: 1000px;
}
.card-flip:active .flip, .card-flip.active .flip {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.card-flip,
.front,
.back {
width: 100%;
height: 38rem;
}
.flip {
transition: 0.6s;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
position: relative;
}
.front,
.back {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
z-index: 2;
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.back {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
<div id="CardsApp" v-cloak>
<div class="container">
<img id="loadingImg" v-if="isFetchingData" src="../../images/loading.gif" class="img-fluid mx-auto d-block" alt="Loading" />
</div>
<section>
<div class="container">
<div class="row">
<div v-for="card in cards" class="col-sm-6 col-lg-4">
<!-- Card Flip -->
<div class="card-flip">
<div class="flip">
<div class="front">
<!-- front content -->
<div class="card border-success text-white bg-dark mb-5" style="max-width: 20rem;">
<img class="card-img-top" src="/images/SquanchyCardLogo.jpg" alt="Card image cap" style="display: block;" data-holder-rendered="true">
<div class="card-body">
<h5 class="card-title text-center">Cards For Squanchies</h5>
<p class="card-text text-center" style="min-height: 7rem">{{card.frontText}}</p>
</div>
<div class="card-footer">
<small class="text-muted">Card No. {{card.id}}</small>
<button onclick="isFlipped()" type="button" class="btn btn-outline-warning btn-sm float-right">Flip this biaatch back!</button>
</div>
</div>
</div>
<div class="back">
<!-- back content -->
<div class="card border-success text-white bg-dark mb-5" style="max-width: 20rem;">
<img class="card-img-top" src="/images/SquanchyCardLogo.jpg" alt="Card image cap" style="display: block;" data-holder-rendered="true">
<div class="card-body">
<h5 class="card-title text-center">Cards For Squanchies</h5>
<p class="card-text text-center" style="min-height: 7rem">{{card.backText}}</p>
</div>
<div class="card-footer">
<small class="text-muted">Card No. {{card.id}}</small>
<button onclick="isFlipped()" type="button" class="btn btn-outline-warning btn-sm float-right">Flip this biaatch back!</button>
</div>
</div>
</div>
</div>
</div>
<!-- End Card Flip -->
</div>
</div>
</div>
</section>
<!-- CardsApp ends-->
</div>
<script type="text/javascript" src="~/Scripts/vue.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript" src="../../Vue/vue-cards.js"></script>
<script type="text/javascript">
function isFlipped() {
document.querySelector(".card-flip").classList.toggle("flip");
console.log('Inside isFLipped function')
}
</script>
Jquery - Animation as Slide
Hello I've simple animation car using HTML & CSS & JQuery but I'd like to add some effects, for example I need to stop car wheel rotation after the car come in and run the car wheel rotation when the car started to leave the screen, this was the first Problem.
Second Problem
that I need when the car is come in screen change the car angle (rotate) and reduce the car speed.
and when the car is started to leave the screen, animation the car angle (rotate) and increase the car speed.
Youtube Video
Here my code:
$('.wheelEleContainer .slectWheel').click(function (e) {
e.preventDefault();
var getImgWheel = $(this).find('img').attr('src');
$('.car .car__wheel').css('background-image',
'url(' + getImgWheel + ')'
);
});
var $cars = $('.car');
$('.car-model').on('click', function () {
var $current = $cars.find('.current');
var $next = $current.next();
if ($next.length === 0) $next = $current.prevAll().last();
$current.addClass('car--trans-out');
setTimeout(function () {
$current.removeClass('current').removeClass('car--trans-out');
$next.addClass('current').addClass('car--trans-in');
setTimeout(function () {
$next.removeClass('car--trans-in');
}, 1000)
}, 1000);
})
.car{
height:600px;
padding:40px 0;
background-color:#efefef;
overflow:hidden;
}
.car .click{
width:100%;
padding:10px;
text-align:center;
border:1px solid #0094ff;
margin-bottom:30px;
}
.car-image-container{
position: absolute;
left: 100%;
overflow: hidden;
}
.current{
position: relative;
left: 0;
}
.current .current{
left: 0;
}
.car .car-image .car__wheel{
width:99px;
height:100px;
position:absolute;
background-repeat:no-repeat;
background-position:center center;
}
.car .car-image .car__wheel.left{
background-image:url('http://store6.up-00.com/2017-03/148992740531661.png');
top:94px;
left:98px;
}
.car .car-image .car__wheel.right{
background-image:url('http://store6.up-00.com/2017-03/148992740544512.png');
top:94px;
right:75px;
}
.car--trans-in .car__wheel{
animation: roll-in 400s ease-out;
}
.car--trans-out .car__wheel{
animation: roll-out 400s ease-out;
}
.car--trans-in .car-image{
animation: trans-in 1s ease-out;
}
.car--trans-out .car-image{
animation: trans-out 1s ease-in;
}
.car--trans-in .car__wheel{
animation: roll-in 1s ease-out;
}
.car--trans-out .car__wheel{
animation: roll-out 1s ease-out;
}
.car--trans-in .car-image img{
animation: bounce-in 1s ease-out;
}
.car--trans-out .car-image img{
animation: bounce-out 1s ease-in;
}
#keyframes trans-in {
0% {transform: translateX(100%);}
80% {transform: translateX(0%);}
100% {transform: translateX(0%);}
}
#keyframes trans-out {
0% {transform: translateX(0%);}
10% {transform: translateX(0%);}
80% {transform: translateX(-100%);}
100% {transform: translateX(-100%);}
}
#keyframes roll-in {
0% {transform: rotate(0deg);}
80% {transform: rotate(-720deg);}
100% {transform: rotate(-720deg);}
}
#keyframes roll-out {
0% {transform: rotate(0deg);}
100% {transform: rotate(-720deg);}
}
#keyframes bounce-in {
0% {transform: rotate(2deg);}
70% {transform: rotate(2deg);}
80% {transform: rotate(-1deg);}
90% {transform: rotate(1deg);}
100% {transform: rotate(0deg);}
}
#keyframes bounce-out {
0% {transform: rotate(0deg);}
20% {transform: rotate(2deg);}
100% {transform: rotate(2deg);}
}
.car .wheelEleContainer{
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="car">
<div class="container">
<button>Next</button>
<div class="row">
<div class="car-button-container">
<div class="col-md-2 col-md-offset-2 col-sm-3 col-xs-6">
<div class="click car-model" data-index="1">
Car Model 1
</div>
</div>
<div class="col-md-2 col-sm-3 col-xs-6">
<div class="click car-model" data-index="2">
Car Model 2
</div>
</div>
<div class="col-md-2 col-sm-3 col-xs-6">
<div class="click car-model" data-index="3">
Car Model 3
</div>
</div>
<div class="col-md-2 col-sm-3 col-xs-6">
<div class="click car-model" data-index="4">
Car Model 4
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="row">
<div class="col-lg-7 col-lg-offset-2">
<div class="car-image-container current">
<div class="car-image" data-car-index="1">
<img class="img-responsive" src="http://store6.up-00.com/2017-03/148992727111161.png" alt="" />
<div class="car__wheel left"></div>
<div class="car__wheel right"></div>
</div>
</div>
<div class="car-image-container">
<div class="car-image" data-car-index="2">
<img class="img-responsive" src="http://store6.up-00.com/2017-03/148992727122822.png" alt="" />
<div class="car__wheel left"></div>
<div class="car__wheel right"></div>
</div>
</div>
<div class="car-image-container">
<div class="car-image" data-car-index="3">
<img class="img-responsive" src="http://store6.up-00.com/2017-03/148992727131353.png" alt="" />
<div class="car__wheel left"></div>
<div class="car__wheel right"></div>
</div>
</div>
<div class="car-image-container">
<div class="car-image" data-car-index="4">
<img class="img-responsive" src="http://store6.up-00.com/2017-03/148992727151114.png" alt="" />
<div class="car__wheel left"></div>
<div class="car__wheel right"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="wheelEleContainer">
<div class="col-lg-1 col-lg-offset-2">
<div class="slectWheel">
<img src="http://store6.up-00.com/2017-03/148992740561243.png" alt="" />
</div>
</div>
<div class="col-lg-1">
<div class="slectWheel">
<img src="http://store6.up-00.com/2017-03/14899275127831.png" alt="" />
</div>
</div>
<div class="col-lg-1">
<div class="slectWheel">
<img src="http://store6.up-00.com/2017-03/148992740580684.png" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
Note: please run code snippet in fullscreen
You could use CSS animations to get the car to transition into the frame, another animation to make the car rotate as it is moving.
Take a look at this example jsFiddle I have done.
I am using a html structure like this:
<div class="cars">
<div class="car">
<div class="car__inner">
<div class="car__chassis">
</div>
<div class="car__wheels">
<div class="car__wheel car__wheel--left">
</div>
<div class="car__wheel car__wheel--right">
</div>
</div>
</div>
</div>
...
</div>
Using jQuery I am adding some classes to the <div class="car"> which will allow us to attach CSS animations.
var $cars = $('.cars');
$('button').on('click', function(){
var $active = $cars.find('.car--active');
var $next = $active.next();
if($next.length===0) $next = $active.prevAll().last();
$active.addClass('car--trans-out');
setTimeout(function(){
/*Wait a second before removing the class*/
$active.removeClass('car--active').removeClass('car--trans-out');
$next.addClass('car--active').addClass('car--trans-in');
setTimeout(function(){
$next.removeClass('car--trans-in');
},1000)
},1000);
})
Edit: Here is another jsFiddle which is using the same markup and script as the original post with the addition of some class names and animations
Scrolling tile images with css
I wish to have a row of 3 images which will contain around 10 images per row. The image dimensions are 270x270px and should animate like you'd imagine clouds floating from right to left on the screen. I'd like the top row of images to go right to left, the middle the opposite direction and the bottom the same as the top but at different intervals. I'm not 100% sure on how to accomplish this and I'm new to CSS animations. I've tried floating list items inside of a but the browser appears to clip the ul inside of the window and doesn't let it float off the screen. see image for details The images should loop and continue to show a flow of images without any interruption in animation or placement. Any help getting started would be much appreciated. G
Do you mean something like this jsFiddle ?
HTML
<div class="container">
<div class="rowContainer">
<div class="row rtl">
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell">4</div>
<div class="cell">5</div>
<div class="cell">6</div>
<div class="cell">7</div>
<div class="cell">8</div>
<div class="cell">9</div>
<div class="cell">10</div>
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell">4</div>
<div class="cell">5</div>
<div class="cell">6</div>
<div class="cell">7</div>
<div class="cell">8</div>
<div class="cell">9</div>
<div class="cell">10</div>
</div>
</div>
<div class="rowContainer">
<div class="row ltr">
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell">4</div>
<div class="cell">5</div>
<div class="cell">6</div>
<div class="cell">7</div>
<div class="cell">8</div>
<div class="cell">9</div>
<div class="cell">10</div>
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell">4</div>
<div class="cell">5</div>
<div class="cell">6</div>
<div class="cell">7</div>
<div class="cell">8</div>
<div class="cell">9</div>
<div class="cell">10</div>
</div>
</div>
<div class="rowContainer">
<div class="row rtl">
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell">4</div>
<div class="cell">5</div>
<div class="cell">6</div>
<div class="cell">7</div>
<div class="cell">8</div>
<div class="cell">9</div>
<div class="cell">10</div>
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell">4</div>
<div class="cell">5</div>
<div class="cell">6</div>
<div class="cell">7</div>
<div class="cell">8</div>
<div class="cell">9</div>
<div class="cell">10</div>
</div>
</div>
</div>
CSS
* {
margin: 0;
padding: 0;
}
#-webkit-keyframes scrollRtL {
0% { transform: translate(0, 0); }
100% { transform: translate(-50%, 0); }
}
#keyframes scrollRtL {
0% { transform: translate(0, 0); }
100% { transform: translate(-50%, 0); }
}
#-webkit-keyframes scrollLtR {
0% { transform: translate(-50%, 0); }
100% { transform: translate(0, 0); }
}
#keyframes scrollLtR {
0% { transform: translate(-50%, 0); }
100% { transform: translate(0, 0); }
}
html, body, .container {
overflow: hidden;
width: 100%;
height: 100%;
}
.rtl {
-webkit-animation: scrollRtL 5s linear infinite;
animation: scrollRtL 5s linear infinite;
}
.ltr {
-webkit-animation: scrollLtR 5s linear infinite;
animation: scrollLtR 5s linear infinite;
}
.rowContainer {
position: relative;
height: 280px;
}
.row {
position: absolute;
white-space: nowrap;
font-size: 0;
}
.cell {
font-family: verdana;
display: inline-block;
font-size: 36px;
width: 270px;
height: 270px;
background-color: red;
color: white;
margin: 5px;
}
Only problem is that I had to place all elements twice in a row so it looks like an infinite scroll...
First you need a wrap div, which its width is three times of your image, so that it can display 3 of your images at a time. Set the wrap div style: position:relative; overflow:hidden; Create row div, 10 images in that div, and use 'position:abolute;left:0;' , then you can use css3 transform to move it.
Do you mean something like this? <marquee behavior="scroll" direction="left" scrollamount="10"><img src="http://www.html.am/images/html-codes/marquees/fish-swimming.gif" width="94" height="88" alt="Swimming fish" /></marquee> http://jsfiddle.net/mLbkcwmf/