Animating Scrolling

Developer
Charlie Walter
Size
3,221 Kb
Views
8,096
  1. Animating Scrolling Previews
  2. Animating Scrolling HTML Codes
  3. Animating Scrolling CSS Codes
  4. Animating Scrolling JS Codes

How do I make an animating scrolling?

Slightly altered http://css-tricks.com/snippets/jquery/smooth-scrolling/ - Thanks chris. What is a animating scrolling? How do you make a animating scrolling? This script and codes were developed by Charlie Walter on 11 January 2023, Wednesday.

Animating Scrolling Previews
IQ Test

Animating Scrolling - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animating Scrolling</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav> <a href="#First">Lorem</a> <a href="#Second">Ipsum</a> <a href="#Third">Dorem</a> <a href="#Fourth">Sit</a> <a href="#Fifth">Amet</a> <a href="#Sixth">Netus</a>
</nav>
<section> <h1 id="First"><i class="fa fa-html5"></i>Lorem</h1> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</section>
<section> <h1 id="Second"><i class="fa fa-css3"></i>Ipsum</h1> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</section>
<section> <h1 id="Third"><i class="fa fa-windows"></i>Dorem</h1> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</section>
<section> <h1 id="Fourth"><i class="fa fa-stack-overflow"></i>Sit</h1> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</section>
<section> <h1 id="Fifth"><i class="fa fa-facebook-square"></i>Amet</h1> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</section>
<section> <h1 id="Sixth"><i class="fa fa-android"></i>Netus</h1> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Animating Scrolling - Script Codes CSS Codes

* { font-family: Open sans, Helvetica, Arial;
}
body { background-color: #222; color: white; margin-bottom: 15em;
}
h1 { color: white; text-transform: uppercase;
}
h1 i { color: #e67e22; margin-left: -1.5em; margin-right: 0.5em;
}
nav { text-align: center; position: fixed; z-index: 2; top: 0; width: 100%; background-color: #2ecc71; -webkit-box-shadow: 0 5px 0 0 #27ae60; -moz-box-shadow: 0 5px 0 0 #27ae60; box-shadow: 0 5px 0 0 #27ae60;
}
nav a { display: inline-block; text-decoration: none; border: none; background-color: transparent; font-size: 1em; text-transform: uppercase; padding: 0.5em 0.5em; color: white; margin: 5px; font-weight: 1000; text-shadow: 0 1px #27ae60; font-weight: bold;
}
nav a:hover { border-top: 5px solid #27ae60; margin-top: 0;
}
section { width: 75%; margin: 0 auto;
}
section h1 { padding-top: 3em; margin: 0;
}

Animating Scrolling - Script Codes JS Codes

$(function() { $('a[href*=#]:not([href=#])').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); if (target.length) { $('html,body').stop().animate({ scrollTop: target.offset().top }, 1000); return false; } } });
});
Animating Scrolling - Script Codes
Animating Scrolling - Script Codes
Home Page Home
Developer Charlie Walter
Username cjonasw
Uploaded January 11, 2023
Rating 3
Size 3,221 Kb
Views 8,096
Do you need developer help for Animating Scrolling?

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!

Charlie Walter (cjonasw) Script Codes
Name
Ninja Flash CC Animation Canvas
Slanty goodness
Login form
Flash CC HTML5 Canvas
Pointer Lock and First Person Mechanics
Three.js half circle health bar
Calender UI
Projection - Tank Three.js
Facebook tabs with AngularJS
3D PONG
Create amazing marketing copy 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!