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;
}
Related
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.
Here is a resizable UI plugin JS that is working fine with mouse click & drag.
It's changing it's font-size with mouse. Meaning, when I change the width or height of my div with id="chartdiv" from mouse corner then it is changing the font-size correctly. However, when I change the width or height of my div with id="chartdiv" from button onClick, then it's not working.
I want to use this font-size resizable feature from Button.
For this query I already visited to this answer: How to trigger jquery Resizable resize programmatically? but there is not font-size function
What mistake am I making here?
Below is my code:
<!DOCTYPE html>
<html>
<head>
<style>
.resize{
font-size: 2.8vh;
white-space: nowrap;
color: black;
background: yellow;
cursor: move;
width: 300px;
height: 130px
}
.resize:focus {
width: 500px; }
</style>
<script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
</head>
<body>
<button type="button" onClick = "document.getElementById('chartdiv').style.width = '600px';">Click Me!</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/smoothness/jquery-ui.css">
<div class="resize" id="chartdiv">Some name that is very long</div>
<script type="text/javascript">
$('.resize').resizable( {
minWidth: 210,
minHeight: 120,
resize: function( event, ui ) {
// handle fontsize here
var size = ui.size;
// something like this change the values according to your requirements
$( this ).css( 'font-size', ( size.width * size.height ) / 2800 + 'px' );
}
} );
</script>
</body>
</html>
Thanks in advance.
Following creates a simple jQuery plugin function fontResize() that can be used in both instances
$.fn.fontResize = function() {
return this.each(function() {
const $el = $(this);
$el.css('font-size', ($el.width() * $el.height()) / 2800 + 'px');
});
}
$('button.do-resize').click(function(){
$('#chartdiv').width(600).fontResize()// use plugin function
})
$('.resize').resizable({
minWidth: 210,
minHeight: 120,
resize: function(event, ui) {
$(this).fontResize();// use plugin function
}
});
<!DOCTYPE html>
<html>
<head>
<style>
.resize {
font-size: 2.8vh;
white-space: nowrap;
color: black;
background: yellow;
cursor: move;
width: 300px;
height: 130px
}
.resize:focus {
width: 500px;
}
</style>
<script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
</head>
<body>
<button class="do-resize" type="button" >Click Me!</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/smoothness/jquery-ui.css">
<div class="resize" id="chartdiv">Some name that is very long</div>
</body>
</html>
<button type="button" onClick = "ResizeWithButton();">Click Me!</button>
function ResizeWithButton(){
var x = document.getElementById('chartdiv');
x.style.width = '600px';
var rect = x.getBoundingClientRect();
x.style.fontSize = `${(rect.width * rect.height)/2800}px`;
}
How to change Page color Smoothly on Scroll like this
Amanda Braga Portfolio
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dpk</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/locomotive-scroll#3.6.1/dist/locomotive-scroll.min.css">
</head>
<body>
<div data-scroll-container>
<section data-scroll-section>
<div class="container Blue"></div>
<div class="container Red"></div>
<div class="container Black"></div>
</section>
</div>
Here we can add Methods for changing Pagecolor
<script src="https://cdn.jsdelivr.net/npm/locomotive-scroll#3.6.1/dist/locomotive-scroll.min.js"></script>
<script>
const scroll = new LocomotiveScroll({
el: document.querySelector('[data-scroll-container]'),
smooth: true
});
</script>
</body>
</html>
You need to give each section an "id" or you can still use a class. Use locomotives scroll event trigger to detect when that section is in-view and give it the colour.
DEMO using jquery.
const scroller = new LocomotiveScroll({
el: document.querySelector('[data-scroll-container]'),
smooth: true
})
scroller.on('scroll', () => {
sectionBgChange();
})
function sectionBgChange() {
let firstSection = $('#yellow').offset().top;
let secondSection = $('#blue').offset().top;
let thirdSection = $('#red').offset().top;
var scrollPos = $(document).scrollTop();
if (scrollPos >= firstSection && scrollPos < secondSection) {
$('#yellow').css('background-color', 'yellow');
} else if (scrollPos >= secondSection && scrollPos < thirdSection) {
$('#blue').css('background-color', 'blue');
} else if (scrollPos >= thirdSection) {
$('#red').css('background-color', 'red');
} else {
$('section').css('background-color', 'white');
}
}
main {
padding: 20px;
background: #f2f2f2;
}
section {
padding: 100px;
margin: 10px 0;
height: 50vh;
z-index: 1;
border: 1px solid #eaeaea;
display: grid;
place-content: center;
font-size: 24px;
text-transform: uppercase;
font-weight: bold;
background-color: white;
box-shadow: 0 2px 12px 0px rgba(0, 0, 0, 0.25);
position: relative;
border-radius: .5rem;
}
section::before {
content: attr(data-section);
}
<script src="https://cdn.jsdelivr.net/npm/locomotive-scroll#3.5.4/dist/locomotive-scroll.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main data-scroll-container>
<section data-section="Yellow" data-scroll-section id="yellow"></section>
<section data-section="Blue" data-scroll-section id="blue"></section>
<section data-section="Red" data-scroll-section id="red"></section>
</main>
Finally, I Found a Better way to achieve this
Here is Code in case someone need
HTML -
<div class="vh-100">
<span data-scroll data-scroll-repeat data-scroll-call="pageColor"
data-scroll-id="blue"> ____________blue </span>
</div>
<div class="vh-100">
<span data-scroll data-scroll-repeat data-scroll-call="pageColor"
data-scroll-id="green"> ____________green </span>
</div>
<div class="vh-100">
<span data-scroll data-scroll-repeat data-scroll-call="pageColor"
data-scroll-id="#ff0000"> ____________red </span>
</div>
CSS - (for Smooth Transitions)
body{
transition: background-color 1s ease;
}
.vh-100{
height:100vh;
}
JS - (GET ColorCode or Color name from data-scroll-id attribute from html element and assign it to body background color)
setTimeout(() => {
scroll.on('call', (value, way, obj) => {
if (way === 'enter') {
switch (value) {
case "pageColor":
// get color code from data-scroll-id assigned to body by obj.id
document.querySelector('body').style.backgroundColor = obj.id;
break;
}
}
});
}, 800);
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 using CkEditor.So I set up a4 size for textarea.
CKEDITOR.editorConfig = function( config ) {
config.height = '842px';
config.width = '595px';
};
HTML:
<textarea name="Editor" class="ckeditor" id="aboutme"></textarea>
Javascript:
var editor = CKEDITOR.instances.aboutme;
var edata = editor.getData();
var replaced_text = edata.replace(/(\[##.+?##\])/g, '<span style="background-color:yellow"><strong>$1</strong></span>');
editor.setData(replaced_text);
My question:
If textarea has 2 a4 paper, I want to add red underline between first and second a4 paper in textarea.
I tried to replace to do this however I don't have any idea about a4 paper for ckeditor in javascript .
I want to put red underline after 842px(a4 paper size)
How can I put red underline after 842px in javascript ?
Any help will be appreciated.
Thank you.
Try this example using ckeditor + sharedspace + fake paper with A4 Size.:
http://jsbin.com/nokalosuwi/edit?html,output
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
rel="stylesheet">
<link type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/themes/blue/pace-theme-loading-bar.css"
rel="stylesheet">
<style>
.body {
background: rgb(204, 204, 204);
}
.maindiv {
/*
the content is hidden by default,
and will be shown only after
completed page load and
finalized ckeditor startup
*/
display: none;
}
.content-section {
margin-bottom: 100px;
}
article {
background: white;
width: 21cm;
height: 29.7cm;
display: block;
margin: 0 auto 0.5cm;
box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
padding: 30px;
font-size: 11pt;
line-height: 22pt;
}
article form {
height: 100%;
}
#media print {
body, article[size="A4"] {
margin: 0;
box-shadow: 0;
background: transparent;
}
.cke_pagebreak {
display: block;
page-break-before: always;
}
.content-section {
margin-bottom: 0;
padding-top: 0;
}
.no-print {
display: none;
}
}
</style>
</head>
<body class="body">
<div class="maindiv">
<div id="top-bar" class="navbar-fixed-top no-print">
<div id="top-ck-toolbar">
<!-- ckeditor top toolbar is rendered here -->
</div>
</div>
<div id="content-section" class="content-section">
<article>
<form id="myform" method="post">
<textarea id="mytextarea1" data-ckenable="true"></textarea>
<textarea id="mytextarea2" data-ckenable="true"></textarea>
<textarea id="mytextarea3" data-ckenable="true"></textarea>
</form>
</article>
</div>
<div id="bottom-bar" class="navbar-fixed-bottom no-print">
<div id="bottom-ck-toolbar">
<!-- ckeditor bottom toolbar is rendered here -->
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://cdn.ckeditor.com/4.5.2/full-all/ckeditor.js"></script>
<script>
//get the id's of elements that contains "data-ckenable" attribute
function get_ckenable_element_ids() {
return $("[data-ckenable]").map(function () {
return this.id;
}).get();
}
var ckenable_element_ids_list = get_ckenable_element_ids();
var ckeditor_config = {
extraPlugins: [
"sharedspace",
].join(),
sharedSpaces: {
top: "top-ck-toolbar",
bottom: "bottom-ck-toolbar"
}
};
//start ckeditor
ckenable_element_ids_list.map(function (id_element) {
CKEDITOR.replace(id_element, ckeditor_config);
});
function fix_content_padding() {
var top_menu = $('#top-ck-toolbar');
var content_div = $('#content-section');
var current_top_menu_height = parseInt(top_menu.css('height').replace(/[^-\d\.]/g, ''));
var new_padding_value_to_content = "".concat(current_top_menu_height + 130).concat("px");
content_div.css('padding-top', new_padding_value_to_content);
console.log("fixxxx: ", new_padding_value_to_content);
}
window.addEventListener('resize.fix_content_padding', fix_content_padding, false);
var paceOptions = {
"ajax": false,
"restartOnRequestAfter": false,
"document": false
};
window.paceOptions = paceOptions;
Pace.on('hide', function () {
$(".maindiv").fadeIn("fast");
fix_content_padding();
});
</script>
</body>
</html>
source: https://gist.github.com/luzfcb/bab605975396bccd4aa3