my Javascript knowledge is very limited. I've followed this tutorial: https://www.youtube.com/watch?v=wLUJ9VNzZXo
and all is working as described in video. He cuts off at the "add more text animations" at the end and this is where I'm struggling. I can't get the extra text animations to work. Here is what I have: (the piece I've added is contained between the //Added By Me comment:
const intro = document.querySelector('.intro');
const video = intro.querySelector('video');
const text = intro.querySelector('h1');
const section = document.querySelector('section');
const end = section.querySelector('h1');
const controller = new ScrollMagic.Controller();
let scene = new ScrollMagic.Scene({
duration: 8000,
triggerElement: intro,
triggerHook: 0
})
//.addIndicators() <-- add this in if you want to see the Animation triggers on the screen
.setPin(intro)
.addTo(controller);
//text Animation
const textAnim = TweenMax.fromTo(text, 2, { opacity: 1 }, { opacity: 0 });
const textAnim2 = TweenMax.fromTo(end, 4, { opacity: 1 }, { opacity: 0 });
let scene2 = new ScrollMagic.Scene({
duration: 3000,
triggerElement: intro,
triggerHook: 0
})
.setTween(textAnim)
.addTo(controller);
//Added by Me
let scene3 = new ScrollMagic.Scene({
duration: 3000,
triggerElement: intro,
triggerHook: 0
})
.setTween(textAnim2)
.addTo(controller);
//End Added By Me
//video animation
let accelamount = 0.1;
let scrollpos = 0;
let delay = 0;
scene.on('update', e => {
scrollpos = e.scrollPos/50;
})
setInterval(() => {
delay = (scrollpos - delay) * accelamount;
video.currentTime = delay;
}, 40
);
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: 'Comic Sans MS'
}
.intro {
height: 100vh;
}
.intro video {
height: 100%;
width: 100%;
object-fit: cover;
}
.intro h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 4em;
color: white;
}
section h1 {
padding-top: 300px;
height: 100vh;
font-size: 4em;
color: black;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie-edge" />
<link rel="stylesheet" href="assets/css/ssMainVid.css" />
<title>Document</title>
</head>
<body>
<div class="intro">
<h1>Revolutionary Socks</h1>
<video src="images/SampleVid.mp4"></video>
</div>
<section>
<h1>Another Heading</h1>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js" integrity="sha512-8E3KZoPoZCD+1dgfqhPbejQBnQfBXe8FuwL4z/c8sTrgeDMFEnoyTlH3obB4/fV+6Sg0a0XF+L/6xS4Xx1fUEg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.min.js" integrity="sha512-5/OHwmQzDSBS0Ous4/hlYoWLHd06/d2r7LdKZQVBXOA6PvOqWVXtdboiLTU7lQTGyVoKVTNkwi0ol4gHGlw5ww==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/debug.addIndicators.js" integrity="sha512-mq6TSOBEH8eoYFBvyDQOQf63xgTeAk7ps+MHGLWZ6Byz0BqQzrP+3GIgYL+KvLaWgpL8XgDVbIRYQeLa3Vqu6A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js" integrity="sha512-DkPsH9LzNzZaZjCszwKrooKwgjArJDiEjA5tTgr3YX4E6TYv93ICS8T41yFHJnnSmGpnf0Mvb5NhScYbwvhn2w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="assets/js/app.js"></script>
</body>
</html>
What I want to do is add text will display/ hide based on the scroll position on the screen. The first ones works fine but not the subsequent one.
Related
The below code ALMOST works and I think I'm close yet quite far away from getting it to work properly. The problem is, the way the handlePinch function is set up. What actually happens when the user pinches to zoom a bit, is the square starts to accelerate. The more the user pinches, the faster the square zooms.
How can this be implemented that each time the user pinches to zoom, it incrementally scales, i.e. picking up where it left off without exceeding the max scale?
I'm stuck on this for two days and there doesn't seem to be any formula to show how something like this works. Note, I know there are libraries for this, I want to know how this works with vanilla js
const box = document.querySelector('.box')
function updateCss(scale) {
box.style.transform = `scale(${scale})`
}
let lastScale
let currentScale
let isAlreadyScaled = false
const minScale = 1
const maxScale = 1.8
function handlePinch(e) {
e.preventDefault()
const isZooming = e.scale > 1
if (isZooming) {
if (!isAlreadyScaled) {
lastScale = Math.min(minScale * e.scale, maxScale)
isAlreadyScaled = true
} else {
lastScale = Math.min(minScale * (lastScale * e.scale), maxScale)
}
}
updateCss(lastScale)
}
box.addEventListener('touchstart', e => {
if (e.touches.length === 2) {
handlePinch(e)
}
})
box.addEventListener('touchmove', e => {
if (e.touches.length === 2) {
handlePinch(e)
}
})
* {
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
}
.wrapper {
height: 400px;
width: 100%;
top: 0;
left: 0;
position: relative;
margin: 24px;
}
.scale-container {
height: 100%;
width: 100%;
position: absolute;
background: #eee;
display: flex;
align-items: center;
justify-content: center;
}
.box {
height: 200px;
width: 200px;
background: pink;
position: absolute;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
</head>
<body>
<div class="wrapper">
<div class="scale-container">
<div class="box"></div>
</div>
</div>
</body>
</html>
I'm trying to figure out how to make a dialogue system that shows the text and after you click it removes all the text in the box and new text appears in its place. (I want to be able to do this multiple times)
var container = document.querySelector(".text");
var speeds = {
pause: 400,
slow: 120,
normal: 50,
fast: 20,
superFast: 10
};
var textLines = [{
speed: speeds.slow,
string: "this is a test"
},
{
speed: speeds.pause,
string: "",
pause: true
},
{
speed: speeds.normal,
string: "pls help me"
},
{
speed: speeds.fast,
string: "idk what im doing",
classes: ["red"]
},
{
speed: speeds.normal,
string: ":("
}
];
var characters = [];
textLines.forEach((line, index) => {
if (index < textLines.length - 1) {
line.string += " ";
}
line.string.split("").forEach((character) => {
var span = document.createElement("span");
span.textContent = character;
container.appendChild(span);
characters.push({
span: span,
isSpace: character === " " && !line.pause,
delayAfter: line.speed,
classes: line.classes || []
});
});
});
function revealOneCharacter(list) {
var next = list.splice(0, 1)[0];
next.span.classList.add("revealed");
next.classes.forEach((c) => {
next.span.classList.add(c);
});
var delay = next.isSpace && !next.pause ? 0 : next.delayAfter;
if (list.length > 0) {
setTimeout(function() {
revealOneCharacter(list);
}, delay);
}
}
setTimeout(() => {
revealOneCharacter(characters);
}, 600)
const btn = document.getElementById('btn');
html,
body {
height: 100%;
width: 100%;
}
.text span {
opacity: 0;
}
.text span.revealed {
opacity: 1;
}
.text span.green {
color: #27ae60;
}
.text span.red {
color: #ff0000;
}
body {
background: #3498db;
padding: 3em;
font-family: 'Sora', monospace;
}
.text {
font-size: 6vw;
word-spacing: 0.2em;
margin: 0 auto;
background: #fff;
padding: 1em;
border-bottom: 1vw solid #0e6dad;
position: relative;
line-height: 1.2em;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="text">
</div>
<button id="textchanger"> continue </button>
<script src="script.js">
}
</script>
<script src="https://replit.com/public/js/replit-badge.js" theme="blue" defer></script>
</body>
</html>
so far all I'm able to make from this is a single phrase appear on the screen and that's about it. to change it, I have to go in manually.
I make (almost) all the js from scratch because it would have been really hard to refactor your code in order to achieve what you want, what I've done seems to work, it is pretty straightforward :
const container = document.querySelector(".text");
const btn = document.querySelector("#textchanger");
// rename speeds in delays which is more coherant
const delays = {
slow: 120,
normal: 50,
fast: 20,
superFast: 10
};
const textLines = [
{
delay: delays.slow,
string: "this is a test"
},
{
delay: delays.normal,
string: "pls help me"
},
{
delay: delays.fast,
string: "idk what im doing",
classes: ["red"]
},
{
delay: delays.normal,
string: ":("
}
];
const revealLine = (lineIndex = 0) => {
const line = textLines[lineIndex]
let charIndex = 0
const nextChar = () => {
const char = line.string[charIndex]
const span = document.createElement('span')
span.textContent = char
span.classList.add(...(line.classes ?? []))
container.appendChild(span)
charIndex++
if (charIndex < line.string.length)
setTimeout(nextChar, line.delay);
else if (lineIndex + 1 < textLines.length) {
const cb = () => {
// remove this listener to display the next one
btn.removeEventListener('click', cb)
// clear the container
Array.from(container.children).forEach(el => el.remove())
// reveal the next line
revealLine(lineIndex + 1)
}
btn.addEventListener('click', cb)
}
}
nextChar()
}
revealLine()
html,
body {
height: 100%;
width: 100%;
}
.text span.green {
color: #27ae60;
}
.text span.red {
color: #ff0000;
}
body {
background: #3498db;
padding: 3em;
font-family: 'Sora', monospace;
}
.text {
font-size: 6vw;
word-spacing: 0.2em;
margin: 0 auto;
background: #fff;
padding: 1em;
border-bottom: 1vw solid #0e6dad;
position: relative;
line-height: 1.2em;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="text">
</div>
<button id="textchanger"> continue </button>
</body>
</html>
I'm using jQuery to get user's current height, and after he reaches that height, there will be animation function (Such as reactive websites, when user scroll down he has animation in different part of the page).
Yet, I can't really figure out why exactly the following code doesn't work.
$(window).scroll(function() {
var height = $(window).scrollTop();
if(height > 200) {
$("#project").animate({
bottom: '250px',
opacity: '0.5',
height: '1000px',
width: '100%'
});
}
});
CSS:
/* About Page */
.about{
width: 100%;
height: 1000px;
background-color: blue;
}
/* Projects Page */
.project{
background-color: red;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="jquery-3.4.1.min.js"></script>
<script src="myscripts.js"></script>
<title>My Portfolio</title>
</head>
<body>
<div id="about" class="about">
</div>
<div id="project" class="project">
</div>
</body>
</html>
How can I use scrolling height indicator to activate functions such as animation?
You need to take into account the height of each section and calculate the scrollBottom position instead, which might be more useful if you want to trigger an animation once you reach some element:
const $about = $('#about');
const $projects = $('#projects');
const $services = $('#services');
// Calculate the top offset of each section (number of sections above it * 1000px each).
// We want to expand them when we are 50px above them, so we substract that.
let projectTop = 1000 - 50;
let servicesTop = 2000 - 50;
$(window).scroll(() => {
requestAnimationFrame(() => {
// Calculate the scrollBottom by summing the viewport's height:
const scrollBottom = $(window).scrollTop() + $(window).height();
if (scrollBottom >= projectTop) {
$projects.animate({ height: '1000px' });
}
if (scrollBottom >= servicesTop) {
$services.animate({ height: '1000px' });
}
});
});
body {
margin: 0;
}
.about {
background: red;
width: 100%;
height: 1000px;
}
.projects {
background: green;
width: 100%;
}
.services {
background: blue;
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="about" class="about"></div>
<div id="projects" class="projects"></div>
<div id="services" class="services"></div>
I am working on a Tablet-environment with draggable objects.
The drag & drop works, it is even possible to drag several objects at once, when implemented.
References are :
Reference 1 & Reference 2
This is how the current version of my code looks like:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta
name='viewport'
content='width=50px, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,'
/>
<!--
Refernces:
* https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Drag_and_Drop
* https://mobiforge.com/design-development/touch-friendly-drag-and-drop
-->
<style>
#container {
width: 200px;
height: 200px;
position: relative;
background: yellow;
top: 100px
}
main1 {
position: relative;
}
div1 {
position: absolute;
top: 0px;
left: 100px;
height: 72px;
width: 72px;
background: red;
border: 0px solid #666;
margin: 0;
padding: 0;
}
</style>
<title>Clean up</title>
</head>
<body>
<div id ="container">
</div>
<main1 id="main1">
<div1 class="draggable" id="d1-0""></div1>
</main1>
<script>
var nodeList = document.getElementsByClassName('draggable');
for(var i=0;i<nodeList.length;i++) {
var obj = nodeList[i];
obj.addEventListener('touchmove', function(event) {
var touch = event.targetTouches[0];
// Place element where the finger is
event.target.style.left = touch.pageX + 'px';
event.target.style.top = touch.pageY + 'px';
event.preventDefault();
}, false);
}
</script>
</body>
</html>
The idea is, that the red box (div1) can be moved, dragged and dropped everywhere on the screen. But it needs to be moved to its very initial starting position, when it enters the yellow canvas. (The idea is to "clean up" and "move objects back to where they came from".)
You should use jQuery UI's draggable and touch punch for mobile friendliness
Let me know if this is close to what you're looking for and we can adjust as needed
$(document).ready(function() {
$('#div1').draggable();
$('#container').droppable({
drop: function( event, ui ) {
alert("You dropped the red on the yellow");
}
});
$(document).on("click", "#animateBtn", function() {
//Simple animate w/ just specifying the offsets
//$('#div1').animate({top:"250px", left:"250px"});
//Other animate options
$('#div1').animate({
top:"15px",
left:"15px"
}, {
duration:555, //Animation time in pixels
easing:"easeOutQuart" //See https://api.jqueryui.com/easings/
});
});
});
#container {
width: 200px;
height: 200px;
position: relative;
background: yellow;
top: 100px
}
body {
position: relative;
}
#div1 {
position: absolute;
top: 0px;
left: 100px;
height: 72px;
width: 72px;
background: red;
border: 0px solid #666;
margin: 0;
padding: 0;
}
#animateBtn {
position:fixed;
right:10px;
bottom:10px;
display:inline-block;
padding:3px 5px;
background-color:green;
color:white;
border-radius:6px
}
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta
name='viewport'
content='width=50px, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,'
/>
<title>Drag and Drop</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
</head>
<body>
<div id="container"></div>
<div class="draggable" id="div1"></div>
<div id="animateBtn">Animate</div>
</body>
</html>
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta
name='viewport'
content='width=50px, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,'
/>
<title>Drag and Drop</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<style>
#container {
width: 200px;
height: 200px;
position: relative;
background: yellow;
top: 100px
}
body {
position: relative;
}
#div1 {
position: absolute;
top: 100px;
left: 100px;
height: 72px;
width: 72px;
background: red;
border: 0px solid #666;
margin: 0;
padding: 0;
}
</style>
<title>Clean up</title>
</head>
<body>
<div id="container"></div>
<div class="draggable" id="div1"></div>
<!--<div id="animateBtn">Animate</div>-->
<script>
$(document).ready(function() {
$('#div1').draggable();
$('#container').droppable({
drop: function() {
$('#div1').animate({top:"100px", left:"100px"});
}
});
});
</script>
</body>
</html>
I didn't see a mention of jQuery but w3schools has a working example that goes without. Could you some touchup though:
/**
* Make object draggable
* #param {Element} element
*/
const addDraggable = (element)=> {
let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
const dragMouseDown = e => {
e = e || window.event;
e.preventDefault();
// get the mouse cursor position at startup:
[pos3, pos4] = [e.clientX, e.clientY];
document.onmouseup = closeDragElement;
document.onmousemove = elementDrag;
};
const elementDrag = e => {
console.log(e.clientX, e.clientY);
e = e || window.event;
e.preventDefault();
// calculate the new cursor position:
[pos1, pos2] = [pos3 - e.clientX, pos4 - e.clientY];
[pos3, pos4] = [e.clientX, e.clientY];
// set the element's new position:
[element.style.top, element.style.left] =
[(element.offsetTop - pos2) + "px", (element.offsetLeft - pos1) + "px"];
};
const closeDragElement = _ => {
// stop moving when mouse button is released:
document.onmouseup = null;
document.onmousemove = null;
};
element.onmousedown = dragMouseDown;
}
document.addEventListener("DOMContentLoaded", event=> {
_('#logo-top').addEventListener('click', event=> {
event.stopPropagation();
_('#logo-top').classList.toggle('active');
_('nav').forEach( n=> n.classList.toggle('collapsed') );
_('main').classList.toggle('extended');
});
addDraggable( _('#help-text') );
_( '#help' ).addEventListener( 'click', ()=>{ _('#help-text').classList.toggle('active')} );
_( '#help-text-close' ).addEventListener( 'click', ()=>{_('#help-text').classList.toggle('active')} );
});
Another way would be to use the Drag Operations
i just started working with scrollmagic, but i can't seem to get it functioning properly. I followed a simple tutorial to do a few animations on different sections. I'm not sure if didn't import the classes, right, but i'm stuck. Help would be greatly appreciated and i've attached my js, html, and css file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ScrollMagic #1 Setup</title>
<script>
window.jQuery || document.write('<script src="js/vendor/jquery-1.11.0.min.js"><\/script>')
</script>
<link rel="stylesheet" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/lib/greensock/TweenMax.min.js"></script>
<script src="js/uncompressed/plugins/animation.gsap.min.js"> </script>
<script src="main.js"></script>
<script src="js/uncompressed/ScrollMagic.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
</head>
<body>
<main class="full-screen" role="main">
<section class="full-screen blue">
<div>
<h1>Basic Tweening</h1>
</div>
</section>
<section id="scale-trigger" class="full-screen orange">
<div id="scale-animation">
<p>This element will scale down using the scale value of the CSS transform property.</p>
</div>
</section>
<section id="bg-trigger" class="full-screen red">
<div id="bg-animation">
<p>This element will have the background color change</p>
</div>
</section>
<section id="yoyo-trigger" class="full-screen blue">
<div>
<p id="yoyo-animation">Section Four yoyo Text!</p>
</div>
</section>
</main>
</body>
</html>
JS FILE
(function($) {
// Scale Animation Setup
// .to('#target', #length, {#object})
var scale_tween = TweenMax.to('#scale-animation', 1, {
transform: 'scale(.75)',
ease: Linear.easeNone
});
// BG Animation Setup
// .to('#target', #length, {#object})
var bg_tween = TweenMax.to('#bg-trigger', 1, {
backgroundColor: '#FFA500',
ease: Linear.easeNone
});
// YoYo Animation Setup
// .to(#target, #length, #object)
var yoyo_tween = TweenMax.to('#yoyo-animation', 1, {
transform: 'scale(2)',
ease: Cubic.easeOut,
repeat: -1, // this negative value repeats the animation
yoyo: true // make it bounce…yo!
});
// init ScrollMagic Controller
var controller = new ScrollMagic.Controller();
// Scale Scene
var scale_scene = new ScrollMagic.Scene({
triggerElement: '#scale-trigger'
})
.setTween(scale_tween);
// Background Scene
var bg_scene = new ScrollMagic.Scene({
triggerElement: '#bg-trigger'
})
.setTween(bg_tween);
// YoYo Scene
var yoyo_scene = new ScrollMagic.Scene({
triggerElement: '#yoyo-trigger'
})
.setTween(yoyo_tween);
controller.addScene([
scale_scene,
bg_scene,
yoyo_scene
]);
})(jQuery);
CSS FILE
html,
body {
margin: 0;
height: 100%
}
h1,
p {
margin: 0;
padding: 0;
}
header {
position: fixed;
top: 10px;
left: 10px;
}
section {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
color: #EFEFEF;
}
.full-screen {
height: 100%; /* makes panels the entire window height */
}
.blue {
background-color: #3883d8;
}
.red {
background-color: #cf3535;
}
.orange {
background-color: #ea6300;
}