Animated title moving on scroll

Developer
Robert Borghesi
Size
6,002 Kb
Views
38,456
  1. Animated title moving on scroll Previews
  2. Animated title moving on scroll HTML Codes
  3. Animated title moving on scroll CSS Codes
  4. Animated title moving on scroll JS Codes

How do I make an animated title moving on scroll?

Experimentation of a moving opening title, moving from opening to text.. What is a animated title moving on scroll? How do you make a animated title moving on scroll? This script and codes were developed by Robert Borghesi on 27 August 2022, Saturday.

Animated title moving on scroll Previews
IQ Test

Animated title moving on scroll - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated title moving on scroll </title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- WATCH FULLSCREEN FOR BETTER EXPERIENCE -->
<div class="header"></div>
<article class="container"> <h1 class="opening" id="title">Infinity Pool<br> In A Wristwatch</h1> <h2>Designing the Moto 360</h2> <section> <p>Dickon Isaacs, Motorola’s director of design for wearables, was faced with a daunting task when creating the Moto 360 with his team of designers, engineers, researchers and prototypers. Their goal was to design a wristwatch with the elegance and style of a timeless timepiece but containing the most advanced wearable computing technology available today. The Moto 360 is a decidedly futuristic device to be worn comfortably in the present.</p> <p>Isaacs: It’s really discrete. So you can glance quickly at your wrist which I think is socially more acceptable than picking your phone out of your pocket and holding it up in front of you. That breaks any interaction you are having with the person you are talking to. Because the watch is touching your skin, there are some really nice things that you can do around what we call ‘haptic feedback.’ So, when you get a new notice from someone there’s a small vibration on your wrist. Your phone doesn’t ring. And you don’t even have to pull your arm all the way up in front of you. You can, through the sensors, literally just twist your wrist and that natural action will wake up the display so you can quickly glance and see what the message is about.</p> <p>Some of the earliest design concepts we had were interesting exercises in form. We were making good progress in terms of dealing with ergonomics, but we weren’t really hitting it cleanly when it came to this idea of fashion and lifestyle. The prototypes ended up looking like tech gadgets, almost like parodies of what a smartwatch should look like. After doing a couple of rounds of that we said this is conceptually the wrong approach. Rather than approach the design in terms of what we could do with existing technology, we decided to start from the beginning with a blank piece of paper and say, ‘What should this object be?’ If you say ‘It’s a watch,’ we felt like that answered many questions, firstly that it has to be round. Culturally that form is understood, globally it has universal appeal, and that’s what we really wanted, to launch a product that people understood right away.</p> </section>
</article>
<div class="fullimage" id="clocks"></div>
<article class="container"> <section> <p>One of them was letting the content ultimately be the most important thing, and trying to maximize the size of that display all the way out to the edge of the watch. We had to push the boundaries of display technologies and construction technologies to get a thin border of metal just around the display, and when it lights up for those pixels to illuminate all the way out to the edge of that lens. It’s kind of magical the first time you see it, and emotionally we think that’s really crucial.</p> <p>Prototyping is essential, and a lot of rapid prototyping. So we used a 3D printer that can print with hard and flexible materials. We used that for a quick check of the size and proportion of the product early on. We were able to rapidly build something overnight, a band design for example, and look at the fit and form of it the next day. Designing for the wrist is an ergonomic design challenge. You’re trying to balance size, weight, and proportion while trying to clear the wrist bones. The end result needs to feel modern and sleek. So we made a ton of prototypes. And then we quickly moved to machining in stainless steel because we wanted to see what the form looked like in the real material.</p> <p>There were a lot. Getting the Bluetooth antenna to work through the stainless steel housing was a big deal. It’s really hard — antennas don’t like metal, so there’s a lot of phenomenal engineering that went into figuring out how to make that work. Developing a round display that works and looks as good as it does, and with the thinnest of borders outside of the edge so we could maintain that proportion of display to metal, was crucial and very difficult. With existing off-the-shelf round displays we’d end up with a big frame around the display and a small viewing area. Someone described that what we were really going for was the visual effect of looking at the top of an infinity pool.</p> </section> <p>Article from <a href="https://medium.com/moto-360/infinity-pool-in-a-wristwatch-b95eb90275e2" target="_blank">Medium</a></p>
</article> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Animated title moving on scroll - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Lato:400,700,900);
.disable { overflow: hidden;
}
* { box-sizing: border-box;
}
html, body { height: 100%; width: 100%; margin: 0; padding: 0; font-family: 'Lato', sans-serif; color: #212121; border: 10px solid white;
}
a { text-decoration: none; color: #5B92FA;
}
.header { background: url("https://d262ilb51hltx0.cloudfront.net/max/2000/1*kShruX3KOtxoLfatneOTRQ.jpeg"); height: 100%; width: 100%; background-position: 50% 50%;
}
.container { max-width: 960px; margin: 0 auto; text-align: center;
}
h1 { font-size: 60px; line-height: 0.9; text-transform: uppercase; margin-bottom: 20px; text-align: center; /*@include transition(all 0.8s);*/ display: inline-block; -webkit-backface-visibility: hidden; -webkit-transform-style: preserve-3d;
}
.opening { text-align: left;
}
h2 { font-weight: 400; color: #5B92FA;
}
p { font-size: 21px; line-height: 33px; color: rgba(0, 0, 0, 0.7); text-align: left; max-width: 50%; margin: 0 auto 20px auto;
}
#clocks { background-image: url("https://d262ilb51hltx0.cloudfront.net/max/2000/1*rUaJjD0tNGY-NxutbwGlEQ.jpeg"); height: 100%; width: 100%; background-position: 50% 50%; margin: 20px 0;
}

Animated title moving on scroll - Script Codes JS Codes

function move(title){ title .css({ transform: "translate3d(0px,0px, 0px)", WebkitTransform: "translate3d(0px,0px, 0px)", MozTransform: "translate3d(0px,0px, 0px)", msTransform: "translate3d(0px,0px, 0px)"}); }
function scrolling(lastScrollTop,moveX,moveY,title){ var win = $(window); var vh =$(window).height(); vh = vh - 300; var scrolled = win.scrollTop(); var fired = false; /* SCROLL DOWN*/ if (scrolled > lastScrollTop && scrolled < vh){ disable_scroll(); if( $('html,body').is(':not(:animated)') && fired == false ){ fired = true; $('html,body').stop().animate({scrollTop : vh}, 700, function(){enable_scroll();}); console.log("triggerato scende"); move(title); title.removeClass("opening"); } } /* SCROLL UP*/ else{ if(scrolled < vh){if( $('html,body').is(':not(:animated)') ){ disable_scroll(); fired = true; $('html,body').stop().animate({scrollTop : 0}, 700, function(){enable_scroll();}); console.log("triggerato su"); title .css({ transform: "translate3d("+ moveX + "px," + moveY + "px, 0px) scale3d(1.33,1.33,1)", WebkitTransform: "translate3d("+ moveX + "px," + moveY + "px, 0px) scale3d(1.33,1.33,1)", MozTransform: "translate3d("+ moveX + "px," + moveY + "px, 0px) scale3d(1.33,1.33,1)", msTransform: "translate3d("+ moveX + "px," + moveY + "px, 0px) scale3d(1.33,1.33,1)" }); title.addClass("opening"); } } } lastScrollTop = scrolled; return lastScrollTop; } $(document).ready(function(){ var vh =$(window).height(); vh = vh - 300; var title = $("#title"); var posTitle = title.offset().top; var lastScrollTop = 0; var scrolled; var leftTitle = title.offset().left; var moveY = -(posTitle - 300); var moveX = -(leftTitle - 150); $(title) .css({ transform: "translate3d("+ moveX + "px," + moveY + "px, 0px) scale3d(1.33,1.33,1)", WebkitTransform: "translate3d("+ moveX + "px," + moveY + "px, 0px) scale3d(1.33,1.33,1)", MozTransform: "translate3d("+ moveX + "px," + moveY + "px, 0px) scale3d(1.33,1.33,1)", msTransform: "translate3d("+ moveX + "px," + moveY + "px, 0px) scale3d(1.33,1.33,1)" }); setTimeout(function(){ $(title) .css({"transition" : "all 0.7s", "-webkit-transition" : "all 0.7s", "-moz-transition" : "all 0.7s", "-o-transition" : "all 0.7s"} ); }, 300); $(window).scroll(function(){ requestAnimationFrame(function(){ lastScrollTop = scrolling(lastScrollTop, moveX, moveY,title)}); }); });
var keys = [37, 38, 39, 40];
function preventDefault(e) { e = e || window.event; if (e.preventDefault) e.preventDefault(); e.returnValue = false;
}
function keydown(e) { for (var i = keys.length; i--;) { if (e.keyCode === keys[i]) { preventDefault(e); return; } }
}
function wheel(e) { preventDefault(e);
}
function disable_scroll() { if (window.addEventListener) { window.addEventListener('DOMMouseScroll', wheel, false); } window.onmousewheel = document.onmousewheel = wheel; document.onkeydown = keydown;
}
function enable_scroll() { if (window.removeEventListener) { window.removeEventListener('DOMMouseScroll', wheel, false); } window.onmousewheel = document.onmousewheel = document.onkeydown = null;
}
Animated title moving on scroll - Script Codes
Animated title moving on scroll - Script Codes
Home Page Home
Developer Robert Borghesi
Username dghez
Uploaded August 27, 2022
Rating 3.5
Size 6,002 Kb
Views 38,456
Do you need developer help for Animated title moving 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!

Robert Borghesi (dghez) Script Codes
Name
Opening with auto typing responsive sentences with random background color loop
Hover otating cards folder of OnePiece characters
Text-mask background moving on MouseMove - v2
Enel brand - logo animation with tweenmax
Simple PureCss dropdown menu with following subnav
Fullscreen slice hero slider
Continuous register clean form with autoresize input
Easy parallax header
Pure Css Loader - Square
Anaglyph 3D with CSS-blend on mouseMove
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!