Scrolling Effects Practice

Developer
Adam
Size
6,441 Kb
Views
12,144
  1. Scrolling Effects Practice Previews
  2. Scrolling Effects Practice HTML Codes
  3. Scrolling Effects Practice CSS Codes
  4. Scrolling Effects Practice JS Codes

How do I make an scrolling effects practice?

Animation effects when scrolling and smooth scrolling effect when clicking links. What is a scrolling effects practice? How do you make a scrolling effects practice? This script and codes were developed by Adam on 28 November 2022, Monday.

Scrolling Effects Practice Previews
IQ Test

Scrolling Effects Practice - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Scrolling Effects Practice</title> <link href="https://fonts.googleapis.com/css?family=Muli|Philosopher:400,700" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header id="title"> <div class="title"> <h1>City Guide</h1> <h4>Europe's Secret Getaway</h4> </div> </header> <nav> <ul> <li class="logo"><a href="#title">City Guide</a></li> <li><a href="#hotels">Hotels</a></li> <li><a href="#sights">Sights</a></li> <li><a href="#culture">Culture</a></li> </ul> </nav> <main id="hotels" class="hotel content"> <div class="image"><img class="item" src="https://images.unsplash.com/photo-1466499855940-3d95a5277898?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop="></div> <div class="info item"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas nisl quis orci consectetur, vitae convallis nibh tincidunt. Donec eget massa id urna porta scelerisque. Vestibulum et facilisis diam, a condimentum arcu.</p> </div> </main> <article id="sights" class="sights content"> <div class="info item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas nisl quis orci consectetur, vitae convallis nibh tincidunt. Donec eget massa id urna porta scelerisque. Vestibulum et facilisis diam, a condimentum arcu.</div> <div class="image"><img class="item" src="https://images.unsplash.com/photo-1480413258216-ff003d179d65?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop="></div> </article> <article id="culture" class="culture content"> <div class="image"><img class="item" src="https://images.unsplash.com/photo-1458063048042-fa854e05b745?dpr=1&auto=format&fit=crop&w=1500&h=1001&q=80&cs=tinysrgb&crop="></div> <div class="info item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas nisl quis orci consectetur, vitae convallis nibh tincidunt. Donec eget massa id urna porta scelerisque. Vestibulum et facilisis diam, a condimentum arcu.</div> </article> <footer> <ul> <li><i class="fa fa-twitter" aria-hidden="true"></i></li> <li><i class="fa fa-envelope" aria-hidden="true"></i></li> <li><i class="fa fa-facebook" aria-hidden="true"></i></li> <li><i class="fa fa-tripadvisor" aria-hidden="true"></i></li> </ul> </footer> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Scrolling Effects Practice - Script Codes CSS Codes

html { font-family: 'Muli', sans-serif; color: #3f3a51; font-size: 20px;
}
@media (max-width: 900px) { html { font-size: 16px; }
}
@media (max-width: 700px) { html { font-size: 12px; }
}
@media (max-width: 500px) { html { font-size: 8px; }
}
a { color: inherit; text-decoration: none;
}
body { height: 100%;
}
img { width: 100%; height: auto; padding: 10%; border-radius: 15%; transition: all 1s; opacity: 0;
}
/*Header*/
header { text-align: center; display: flex; flex-direction: column; justify-content: space-around; align-items: center; width: 100%; height: 300px; background: linear-gradient(rgba(255, 255, 255, 0), white), url("https://images.unsplash.com/photo-1471623432079-b009d30b6729?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop="); background-size: cover;
}
header h1 { font-family: 'Philosopher', sans-serif; font-size: 7rem;
}
header h4 { margin-top: -17%; font-size: 2rem;
}
/*nav and footer*/
nav,
footer { color: #ffffff; display: flex; width: 100%; height: 50px; background: #3f3a51; font-family: 'Philosopher', sans-serif; align-items: center;
}
nav { justify-content: center; z-index: 1; position: relative; top: 0;
}
nav .logo { display: none;
}
.fixed .logo { display: block;
}
ul { list-style-type: none; display: flex; flex-direction: row; width: 100%; justify-content: space-around; font-size: 1.8rem; align-items: center;
}
ul li:hover { color: #9992b3; cursor: pointer;
}
body.fixed nav { position: fixed;
}
/*Content*/
.content { height: 25%; display: flex; align-items: center; width: 100%; margin: 0 auto; justify-content: space-around;
}
.content div { width: 40%;
}
.info { display: flex; align-items: center; font-size: 1.25rem; transition: all 1s; opacity: 0;
}
.hotel .info { transform: translate(10%, 0);
}
.hotel img { transform: translate(-10%, 0);
}
.hotel .item.move { transform: translate(0, 0); transition: all 1s; opacity: 1;
}
.sights { color: #ffffff; background: #664552;
}
.sights img { padding: 10% 0 10% 5%; transform: scale(0, 0);
}
.sights .info { transform: scale(0, 0);
}
.sights .item.move { transform: scale(1, 1); transition: all 1s; opacity: 1;
}
.culture { background: #9992b3;
}
.culture img { transform: translate(0, 25%);
}
.culture .info { transform: translate(0, 25%);
}
.culture .item.move { transform: translate(0, 0); transition: all 1s; opacity: 1;
}

Scrolling Effects Practice - Script Codes JS Codes

'use strict';
/*Practice using adding animation on scrolling after completing 30 days of Javascript tutorial*/
//Selectors
var scrollItems = document.querySelectorAll('.item');
/*HELPER FUNCTIONS*/
//Had to add as Edge browser doesn't have the forEach method on the nodeList object
NodeList.prototype.forEach = Array.prototype.forEach;
/* Debounce function taken from Underscore.js Used to limit the rate of functions being called on scrolling to optimise browser performance*/
function debounce(func) { var wait = arguments.length <= 1 || arguments[1] === undefined ? 10 : arguments[1]; var immediate = arguments.length <= 2 || arguments[2] === undefined ? true : arguments[2]; var timeout; return function () { var context = this, args = arguments; var later = function later() { timeout = null; if (!immediate) func.apply(context, args); }; var callNow = immediate && !timeout; clearTimeout(timeout); timeout = setTimeout(later, wait); if (callNow) func.apply(context, args); };
};
// Checking when each item is scrolled to and adding animation
function scrollCheck() { //Loop over each item requiring possible animation scrollItems.forEach(function (item) { // Storing when item is scrolled to var moveAt = window.scrollY + window.innerHeight - item.clientHeight / 2.5; var itemBottom = item.offsetTop + item.clientHeight; //If half of item is shown AND item isn't scrolled past - Add animation class var isHalfShown = moveAt > item.offsetTop; var isNotScrolledPast = window.scrollY < itemBottom; if (isHalfShown && isNotScrolledPast) { item.classList.add('move'); } else { item.classList.remove('move'); } });
}
//Event Listeners
window.addEventListener('scroll', debounce(scrollCheck));
/*Navbar*/
var nav = document.querySelector('nav');
var navTop = nav.offsetTop;
//Check if scrolled to navbar and apply fixed position
function navCheck() { var a = window.scrollY + window.innerHeight - nav.clientHeight; if (window.scrollY > navTop) { console.log('n' + navTop); console.log('w' + window.scrollY); console.log(nav); document.body.style.paddingTop = nav.offsetHeight + 'px'; document.body.classList.add('fixed'); } else { document.body.classList.remove('fixed'); document.body.style.paddingTop = 0; }
}
window.addEventListener('scroll', debounce(navCheck));
//Smooth scrolling on href click function. Adapted from CSS tricks
$("a[href^='#']").click(function () { scrollCheck(); var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); if (target.length) { $('html,body').animate({ scrollTop: target.offset().top - 50 }, 1000); return false; }
});
Scrolling Effects Practice - Script Codes
Scrolling Effects Practice - Script Codes
Home Page Home
Developer Adam
Username rzencoder
Uploaded November 28, 2022
Rating 3
Size 6,441 Kb
Views 12,144
Do you need developer help for Scrolling Effects Practice?

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!

Adam (rzencoder) Script Codes
Name
Markdown Previewer
CSS World Flags
React Betting App
Playable Piano Keyboard with Demos
Whack-a-Mole and Simon Game
Countdown Anagram Game
The Crystal Maze
Map Data Across the Globe
HTML Canvas Paint App
React Leaderboard
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!