IMac - Scrolling effect

Developer
Hans Engebretsen
Size
5,429 Kb
Views
24,288
  1. IMac - Scrolling effect Previews
  2. IMac - Scrolling effect HTML Codes
  3. IMac - Scrolling effect CSS Codes
  4. IMac - Scrolling effect JS Codes

How do I make an imac - scrolling effect?

Toggling fixed position while animating translate3d (one of the inexpensive css3 properties) to maintain user expectations with scrolling, just like on the iMac retina site. . What is a imac - scrolling effect? How do you make a imac - scrolling effect? This script and codes were developed by Hans Engebretsen on 09 August 2022, Tuesday.

IMac - Scrolling effect Previews
IQ Test

IMac - Scrolling effect - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>iMac - Scrolling effect</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ .text-content { width: 50%; padding-left: 5%; margin-left: 50%; padding-top: 200px; z-index: 1; position: relative; min-height: 200px;
}
.imac-scrolling { position: relative; padding-bottom: 100px;
}
.imac-container { position: absolute; top: 0; z-index: 1; height: 100%;
}
.imac-container.fixed { position: fixed; top: 1px;
}
.retina-imac { background: url("https://www.apple.com/v/imac-with-retina/a/images/overview/apps_start_large_2x.jpg"); display: block; position: absolute; height: 1494px; width: 766px; margin: 0; padding: 0; background-size: 766px 1494px; position: absolute; margin-left: -253px; top: 0; bottom: auto;
}
.retina-imac.fixed { position: fixed; top: 1px;
}
* { box-sizing: border-box;
}
body { color: #333;
}
a { color: #08c; text-decoration: none;
}
p { font-size: 16px; font-weight: 100; line-height: 1.45em;
}
h1 { font-family: "Myriad Set Pro","Helvetica Neue","Lucida Grande","Helvetica","Arial","Verdana","sans-serif"; font-weight: 100; font-size: 3em;
}
.wrapper { width: 900px; margin: 0 auto; max-width: 100%;
}
.arrow { display: inline-block; position: relative; margin: 0 auto; margin-top: 80px; height: 100px; width: 100px;
}
.arrow:before, .arrow:after { content: ""; position: absolute; bottom: 0; left: 0; width: 50px; height: 1px; background-color: black; display: block; transform-origin: right bottom; transform: rotate(140deg);
}
.arrow:after { transform: rotate(40deg);
}
.intro { min-height: 300px; text-align: center; margin-top: 100px;
}
.intro h1 { font-size: 8em; margin-bottom: 0; line-height: .65em;
}
.intro p { text-transform: uppercase; letter-spacing: .1em;
}
footer { height: 1000px; display: block; background-color: rgba(0, 0, 0, 0.1);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <header class="intro"> <h1>iMac</h1> <p>With Retina 5k Display</p> <span class="arrow"></span>
</header>
<div class="wrapper"> <section class="imac-scrolling"> <div class="imac-container"> <figure class="retina-imac"></figure> </div> <div class="text-content"> <h1>The most stunningly powerful iMac yet.</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe consequuntur consectetur ipsam sit aspernatur tenetur natus enim voluptates fuga ea eius fugit vero esse nesciunt delectus eveniet, error, nihil earum?</p> <a href="">Action Link ></a> </div> <div class="text-content"> <h1>OS X Yosemite. The world’s most advanced desktop operating system.</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe consequuntur consectetur ipsam sit aspernatur tenetur natus enim voluptates fuga ea eius fugit vero esse nesciunt delectus eveniet, error, nihil earum?</p> <p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero illo voluptatum, eos magni illum quaerat, cupiditate tenetur commodi. Architecto nobis blanditiis expedita quae error voluptatem quaerat deleniti itaque fugiat mollitia?</span><span>Facere est fugit natus earum quod eaque corrupti similique, accusantium aliquid magnam voluptatem, minus consequatur ut ratione nostrum libero quia nisi at veniam, officia reprehenderit! Culpa libero, id quos tempora.</span></p> <a href="">Action Link ></a> </div> <div class="text-content"> <h1> The world’s most advanced desktop operating system.</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe consequuntur consectetur ipsam sit aspernatur tenetur natus enim voluptates fuga ea eius fugit vero esse nesciunt delectus eveniet, error, nihil earum?</p> <a href="">Action Link ></a> </div> <div class="text-content"> <h1>Our best built-in apps. The best they’ve ever looked.OS X Yosemite.</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe consequuntur consectetur ipsam sit aspernatur tenetur natus enim voluptates fuga ea eius fugit vero esse nesciunt delectus eveniet, error, nihil earum?</p> <a href="">Action Link ></a> </div> </section> </div>
<footer></footer> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

IMac - Scrolling effect - Script Codes CSS Codes

.text-content { width: 50%; padding-left: 5%; margin-left: 50%; padding-top: 200px; z-index: 1; position: relative; min-height: 200px;
}
.imac-scrolling { position: relative; padding-bottom: 100px;
}
.imac-container { position: absolute; top: 0; z-index: 1; height: 100%;
}
.imac-container.fixed { position: fixed; top: 1px;
}
.retina-imac { background: url("https://www.apple.com/v/imac-with-retina/a/images/overview/apps_start_large_2x.jpg"); display: block; position: absolute; height: 1494px; width: 766px; margin: 0; padding: 0; background-size: 766px 1494px; position: absolute; margin-left: -253px; top: 0; bottom: auto;
}
.retina-imac.fixed { position: fixed; top: 1px;
}
* { box-sizing: border-box;
}
body { color: #333;
}
a { color: #08c; text-decoration: none;
}
p { font-size: 16px; font-weight: 100; line-height: 1.45em;
}
h1 { font-family: "Myriad Set Pro","Helvetica Neue","Lucida Grande","Helvetica","Arial","Verdana","sans-serif"; font-weight: 100; font-size: 3em;
}
.wrapper { width: 900px; margin: 0 auto; max-width: 100%;
}
.arrow { display: inline-block; position: relative; margin: 0 auto; margin-top: 80px; height: 100px; width: 100px;
}
.arrow:before, .arrow:after { content: ""; position: absolute; bottom: 0; left: 0; width: 50px; height: 1px; background-color: black; display: block; transform-origin: right bottom; transform: rotate(140deg);
}
.arrow:after { transform: rotate(40deg);
}
.intro { min-height: 300px; text-align: center; margin-top: 100px;
}
.intro h1 { font-size: 8em; margin-bottom: 0; line-height: .65em;
}
.intro p { text-transform: uppercase; letter-spacing: .1em;
}
footer { height: 1000px; display: block; background-color: rgba(0, 0, 0, 0.1);
}

IMac - Scrolling effect - Script Codes JS Codes

 var scrollPos, sectionHeight, imgWrapStop, scrollSection = $('.imac-scrolling'), imac = scrollSection.find('.retina-imac'), imacWrap = $('.imac-container'), imacOffset = imac.offset().top, $window = $(window); setVars = function(){ scrollPos = $window.scrollTop(); sectionHeight = scrollSection.outerHeight(); imgWrapStop = ((imacOffset + sectionHeight) - (imac.outerHeight())); } toggleFixed = function(img, imgWrap, imgTop){ var isFixed = scrollSection.hasClass('fixed'); if (scrollPos >= imgTop && !isFixed && scrollPos <= imgWrapStop) { // When we're in the zone imgWrap.addClass('fixed'); img.css({ top:0, bottom: 'auto' }); } else if (scrollPos >= imgWrapStop) { // when we're out of the zone img.css({ bottom:0, top: 'auto' }); imgWrap.removeClass('fixed'); } else { imgWrap.removeClass('fixed'); } } translateScroll = function(selector, value, startPos, endPos) { if (scrollPos > startPos && scrollPos < endPos) { // Only run if we're in the zone var disToScroll = (startPos - endPos), disScrolled = (scrollPos - startPos), // Distance already scrolled transY = ((value / disToScroll) * disScrolled ), transYround = +transY.toFixed(2), transCss = 'translate3d( 0, ' + transYround +'px, ' + '0)'; function prefixTransform(selector, translate) {// prefixer function selector.css('transform', translate); selector.css('-moz-transform', translate); selector.css('-webkit-transform', translate); selector.css('-o-transform', translate); selector.css('-ms-transform', translate); } prefixTransform(selector, transCss); } } scrollFix = function(){ window.requestAnimationFrame(function(){ setVars(); toggleFixed(imac, imacWrap, imacOffset); translateScroll(imac, 50, imacOffset, imgWrapStop); }); } init = function(){ scrollIntervalID = setInterval(scrollFix, 10);} init();
IMac - Scrolling effect - Script Codes
IMac - Scrolling effect - Script Codes
Home Page Home
Developer Hans Engebretsen
Username hans
Uploaded August 09, 2022
Rating 4.5
Size 5,429 Kb
Views 24,288
Do you need developer help for IMac - Scrolling effect?

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!

Hans Engebretsen (hans) Script Codes
Name
Background-filter toggle
Email Form Animation
Product -Thumb Hover
Launch Sign up form
The World Wide Web
Pure CSS FitText
Candy Text Typographic Fun
Nice textured background
Nice Grainy background
HTML 5 Audio Player
Create amazing love letters 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!