Light card transition on scroll

Developer
Francois Coron
Size
3,814 Kb
Views
10,120
  1. Light card transition on scroll Previews
  2. Light card transition on scroll HTML Codes
  3. Light card transition on scroll CSS Codes
  4. Light card transition on scroll JS Codes

How do I make an light card transition on scroll?

What is a light card transition on scroll? How do you make a light card transition on scroll? This script and codes were developed by Francois Coron on 08 November 2022, Tuesday.

Light card transition on scroll Previews
IQ Test

Light card transition on scroll - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Light card transition on scroll</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="grid__title"> Articles <p>Last news from the Peaky Blinders</p> </div>
<div class="grid"> <div class="grid__item"> <div class="grid__item__inner"> <header class="article__header"> <div class="article__cover"></div> <div class="article__title">Peaky Blinders</div> </header> <div class="article__summary"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi exercitationem odio tenetur magnam rem enim quaerat dolor distinctio error qui, aspernatur molestiae quos dolores officiis, ex dolore iure facilis pariatur!</div> <div class="article__meta"> <span class="article__meta__date"><i class="fa fa-calendar-o"></i>15/05/2016</span> <span class="article__meta__author"><i class="fa fa-user"></i>Thomas Shelby</span> </div> </div> </div> <div class="grid__item"> <div class="grid__item__inner"> <header class="article__header"> <div class="article__cover"></div> <div class="article__title">Peaky Blinders</div> </header> <div class="article__summary"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi exercitationem odio tenetur magnam rem enim quaerat dolor distinctio error qui, aspernatur molestiae quos dolores officiis, ex dolore iure facilis pariatur!</div> <div class="article__meta"> <span class="article__meta__date"><i class="fa fa-calendar-o"></i>15/05/2016</span> <span class="article__meta__author"><i class="fa fa-user"></i>Thomas Shelby</span> </div> </div> </div> <div class="grid__item"> <div class="grid__item__inner"> <header class="article__header"> <div class="article__cover"></div> <div class="article__title">Peaky Blinders</div> </header> <div class="article__summary"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi exercitationem odio tenetur magnam rem enim quaerat dolor distinctio error qui, aspernatur molestiae quos dolores officiis, ex dolore iure facilis pariatur!</div> <div class="article__meta"> <span class="article__meta__date"><i class="fa fa-calendar-o"></i>15/05/2016</span> <span class="article__meta__author"><i class="fa fa-user"></i>Thomas Shelby</span> </div> </div> </div> <div class="grid__item"> <div class="grid__item__inner"> <header class="article__header"> <div class="article__cover"></div> <div class="article__title">Peaky Blinders</div> </header> <div class="article__summary"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi exercitationem odio tenetur magnam rem enim quaerat dolor distinctio error qui, aspernatur molestiae quos dolores officiis, ex dolore iure facilis pariatur!</div> <div class="article__meta"> <span class="article__meta__date"><i class="fa fa-calendar-o"></i>15/05/2016</span> <span class="article__meta__author"><i class="fa fa-user"></i>Thomas Shelby</span> </div> </div> </div> <div class="grid__item"> <div class="grid__item__inner"> <header class="article__header"> <div class="article__cover"></div> <div class="article__title">Peaky Blinders</div> </header> <div class="article__summary"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi exercitationem odio tenetur magnam rem enim quaerat dolor distinctio error qui, aspernatur molestiae quos dolores officiis, ex dolore iure facilis pariatur!</div> <div class="article__meta"> <span class="article__meta__date"><i class="fa fa-calendar-o"></i>15/05/2016</span> <span class="article__meta__author"><i class="fa fa-user"></i>Thomas Shelby</span> </div> </div> </div> <div class="grid__item"> <div class="grid__item__inner"> <header class="article__header"> <div class="article__cover"></div> <div class="article__title">Peaky Blinders</div> </header> <div class="article__summary"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi exercitationem odio tenetur magnam rem enim quaerat dolor distinctio error qui, aspernatur molestiae quos dolores officiis, ex dolore iure facilis pariatur!</div> <div class="article__meta"> <span class="article__meta__date"><i class="fa fa-calendar-o"></i>15/05/2016</span> <span class="article__meta__author"><i class="fa fa-user"></i>Thomas Shelby</span> </div> </div> </div> <div class="grid__item"> <div class="grid__item__inner"> <header class="article__header"> <div class="article__cover"></div> <div class="article__title">Peaky Blinders</div> </header> <div class="article__summary"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi exercitationem odio tenetur magnam rem enim quaerat dolor distinctio error qui, aspernatur molestiae quos dolores officiis, ex dolore iure facilis pariatur!</div> <div class="article__meta"> <span class="article__meta__date"><i class="fa fa-calendar-o"></i>15/05/2016</span> <span class="article__meta__author"><i class="fa fa-user"></i>Thomas Shelby</span> </div> </div> </div> <div class="grid__item"> <div class="grid__item__inner"> <header class="article__header"> <div class="article__cover"></div> <div class="article__title">Peaky Blinders</div> </header> <div class="article__summary"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi exercitationem odio tenetur magnam rem enim quaerat dolor distinctio error qui, aspernatur molestiae quos dolores officiis, ex dolore iure facilis pariatur!</div> <div class="article__meta"> <span class="article__meta__date"><i class="fa fa-calendar-o"></i>15/05/2016</span> <span class="article__meta__author"><i class="fa fa-user"></i>Thomas Shelby</span> </div> </div> </div> <div class="grid__item"> <div class="grid__item__inner"> <header class="article__header"> <div class="article__cover"></div> <div class="article__title">Peaky Blinders</div> </header> <div class="article__summary"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi exercitationem odio tenetur magnam rem enim quaerat dolor distinctio error qui, aspernatur molestiae quos dolores officiis, ex dolore iure facilis pariatur!</div> <div class="article__meta"> <span class="article__meta__date"><i class="fa fa-calendar-o"></i>15/05/2016</span> <span class="article__meta__author"><i class="fa fa-user"></i>Thomas Shelby</span> </div> </div> </div> <div class="grid__item"> <div class="grid__item__inner"> <header class="article__header"> <div class="article__cover"></div> <div class="article__title">Peaky Blinders</div> </header> <div class="article__summary"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi exercitationem odio tenetur magnam rem enim quaerat dolor distinctio error qui, aspernatur molestiae quos dolores officiis, ex dolore iure facilis pariatur!</div> <div class="article__meta"> <span class="article__meta__date"><i class="fa fa-calendar-o"></i>15/05/2016</span> <span class="article__meta__author"><i class="fa fa-user"></i>Thomas Shelby</span> </div> </div> </div> <div class="grid__item"> <div class="grid__item__inner"> <header class="article__header"> <div class="article__cover"></div> <div class="article__title">Peaky Blinders</div> </header> <div class="article__summary"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi exercitationem odio tenetur magnam rem enim quaerat dolor distinctio error qui, aspernatur molestiae quos dolores officiis, ex dolore iure facilis pariatur!</div> <div class="article__meta"> <span class="article__meta__date"><i class="fa fa-calendar-o"></i>15/05/2016</span> <span class="article__meta__author"><i class="fa fa-user"></i>Thomas Shelby</span> </div> </div> </div> <div class="grid__item"> <div class="grid__item__inner"> <header class="article__header"> <div class="article__cover"></div> <div class="article__title">Peaky Blinders</div> </header> <div class="article__summary"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi exercitationem odio tenetur magnam rem enim quaerat dolor distinctio error qui, aspernatur molestiae quos dolores officiis, ex dolore iure facilis pariatur!</div> <div class="article__meta"> <span class="article__meta__date"><i class="fa fa-calendar-o"></i>15/05/2016</span> <span class="article__meta__author"><i class="fa fa-user"></i>Thomas Shelby</span> </div> </div> </div>
</div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Light card transition on scroll - Script Codes CSS Codes

*,
*::before,
*::after { box-sizing: border-box;
}
body { background: #EAEAEA;
}
.grid { overflow: hidden; width: 60rem; margin: 20px auto; padding: 10px;
}
.grid__title { font-family: 'Source Sans Pro'; font-weight: 900; text-align: center; font-size: 4rem; text-transform: uppercase; padding: 60px 0; color: #22453f;
}
.grid__title p { text-transform: none; color: #555; font-size: 22px; font-weight: 400;
}
.grid__item { width: 50%; padding: 10px; opacity: 0; -webkit-transform: translateY(20%); transform: translateY(20%); -webkit-transition: 800ms ease-in-out; transition: 800ms ease-in-out;
}
.grid__item:nth-child(odd) { -webkit-transition: 1000ms ease-in-out; transition: 1000ms ease-in-out;
}
.grid__item.is-visible { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);
}
.grid__item:nth-child(odd) { float: right;
}
.grid__item__inner { background: #FFF; padding: 0 20px 20px; font-family: 'Source Sans Pro'; box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}
.article__meta { margin-top: 1em; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; border-top: 1px solid #EEE; padding-top: 10px; color: #22453f;
}
.article__meta i { margin-right: 10px;
}
.article__meta__date { -webkit-box-flex: 1; -ms-flex: 1; flex: 1;
}
.article__meta__author { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; text-align: right;
}
.article__cover { height: 200px; margin-left: -20px; margin-right: -20px; background-image: url("http://images.telerama.fr/medias/2015/03/media_123664/peaky-blinders-les-bas-fonds-remontent-sur-arte,M204933.jpg"); background-size: cover;
}
.article__title { text-transform: uppercase; font-weight: 700; font-size: 2em; margin: .5em 0; color: #22453f;
}
.article__summary { line-height: 1.4; color: #555; padding-bottom: 1em;
}

Light card transition on scroll - Script Codes JS Codes

$(window).scroll( function(){	$('.grid__item').each( function(i){	var bottom_of_object = $(this).offset().top + $(this).outerHeight();	var bottom_of_window = $(window).scrollTop() + $(window).height();	if( bottom_of_window > bottom_of_object - 400 ){	$(this).addClass('is-visible');	}	else {	$(this).removeClass('is-visible');	}	});	});
Light card transition on scroll - Script Codes
Light card transition on scroll - Script Codes
Home Page Home
Developer Francois Coron
Username francoiscoron
Uploaded November 08, 2022
Rating 3
Size 3,814 Kb
Views 10,120
Do you need developer help for Light card transition on scroll?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Francois Coron (francoiscoron) Script Codes
Name
Buttons
Starter jade
Typographie
Auto Height textarea
Hover img
Responsive Nav
Reveal footer
Starter CP
Close SVG
UI Quotes
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!