Scroll Animations CSS3 and SCSS

Developer
Jimmy Van Der Sleen
Size
2,962 Kb
Views
6,072
  1. Scroll Animations CSS3 and SCSS Previews
  2. Scroll Animations CSS3 and SCSS HTML Codes
  3. Scroll Animations CSS3 and SCSS CSS Codes
  4. Scroll Animations CSS3 and SCSS JS Codes

How do I make an scroll animations css3 and scss?

Scroll Animations CSS3 and SCSS. What is a scroll animations css3 and scss? How do you make a scroll animations css3 and scss? This script and codes were developed by Jimmy Van Der Sleen on 04 January 2023, Wednesday.

Scroll Animations CSS3 and SCSS Previews
IQ Test

Scroll Animations CSS3 and SCSS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Scroll Animations CSS3 and SCSS</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="wrapper"><h1>Scroll Animations CSS3 and SCSS</h1><section class="section"><p>Lorizzle ipsizzle dolizzle rizzle amizzle, consectetuer adipiscing crazy. Nullizzle sapien velizzle, you son of a bizzle volutpizzle, fo quis, gravida vel, crazy. Pellentesque get down get down tortizzle. Sed erizzle. Go to hizzle ma nizzle dolor dapibus turpis tempizzle stuff. Crunk pellentesque nibh black turpizzle.</p></section> <section class="section"><p>Lorizzle ipsizzle dolizzle rizzle amizzle, consectetuer adipiscing crazy. Nullizzle sapien velizzle, you son of a bizzle volutpizzle, fo quis, gravida vel, crazy. Pellentesque get down get down tortizzle. Sed erizzle. Go to hizzle ma nizzle dolor dapibus turpis tempizzle stuff. Crunk pellentesque nibh black turpizzle.</p></section> <section class="section"><p>Lorizzle ipsizzle dolizzle rizzle amizzle, consectetuer adipiscing crazy. Nullizzle sapien velizzle, you son of a bizzle volutpizzle, fo quis, gravida vel, crazy. Pellentesque get down get down tortizzle. Sed erizzle. Go to hizzle ma nizzle dolor dapibus turpis tempizzle stuff. Crunk pellentesque nibh black turpizzle.</p></section> <section class="section"><p>Lorizzle ipsizzle dolizzle rizzle amizzle, consectetuer adipiscing crazy. Nullizzle sapien velizzle, you son of a bizzle volutpizzle, fo quis, gravida vel, crazy. Pellentesque get down get down tortizzle. Sed erizzle. Go to hizzle ma nizzle dolor dapibus turpis tempizzle stuff. Crunk pellentesque nibh black turpizzle.</p></section> <section class="section"><p>Lorizzle ipsizzle dolizzle rizzle amizzle, consectetuer adipiscing crazy. Nullizzle sapien velizzle, you son of a bizzle volutpizzle, fo quis, gravida vel, crazy. Pellentesque get down get down tortizzle. Sed erizzle. Go to hizzle ma nizzle dolor dapibus turpis tempizzle stuff. Crunk pellentesque nibh black turpizzle.</p></section> <section class="section"><p>Lorizzle ipsizzle dolizzle rizzle amizzle, consectetuer adipiscing crazy. Nullizzle sapien velizzle, you son of a bizzle volutpizzle, fo quis, gravida vel, crazy. Pellentesque get down get down tortizzle. Sed erizzle. Go to hizzle ma nizzle dolor dapibus turpis tempizzle stuff. Crunk pellentesque nibh black turpizzle.</p></section>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Scroll Animations CSS3 and SCSS - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);
body { background-color: #404040; margin: 0; padding: 0; font-family: Open Sans Condensed, Sans Serif;
}
body #wrapper { width: 80%; margin: 50px auto;
}
body #wrapper h1 { color: #FFF; font-size: 2em; text-align: center; margin: 50px 0;
}
section { float: left; width: 100%; height: 400px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; opacity: 0; -webkit-transition: all 1s; transition: all 1s; margin-bottom: 100px; background-color: #6A6A6A; -webkit-perspective: 10em; perspective: 10em;
}
section.animate { opacity: 1;
}
section p { width: 80%; padding: 10px; margin: 0 auto; text-align: center; color: #fff; font-size: 2em; line-height: 1.4em; opacity: 0; -webkit-transition: all 0.35s; transition: all 0.35s; position: relative; top: 80%; -webkit-transform: translateY(-50%); transform: translateY(-50%);
}
section p.animate { opacity: 1; -webkit-transition: all 0.35s ease; transition: all 0.35s ease; top: 50%;
}
section:nth-child(even) { background-color: #6B91A1;
}

Scroll Animations CSS3 and SCSS - Script Codes JS Codes

$(window).scroll(function(){ var wintop = $(this).scrollTop(); $('.section').each(function(){ if(wintop > $(this).offset().top - ($(window).height() / 1.9)){ $(this).addClass('animate'); $(this).find('p').addClass('animate'); } });
});
Scroll Animations CSS3 and SCSS - Script Codes
Scroll Animations CSS3 and SCSS - Script Codes
Home Page Home
Developer Jimmy Van Der Sleen
Username sjimster
Uploaded January 04, 2023
Rating 3.5
Size 2,962 Kb
Views 6,072
Do you need developer help for Scroll Animations CSS3 and SCSS?

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!

Jimmy Van Der Sleen (sjimster) Script Codes
Name
Toggle Hamburger Menu
CountingLikes
Simple image slider
Flexbox vertical slide menu
Fancy input fields
List 3d scroll
Css 3D Cube try-out
Checkbox menu, pure CSS
One-page Navigation scroll plug-in
Website Header SVG Animation
Create amazing art & images 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!