This is my new clear site: www.talas.me
And this is what i want to copy: Awesome Link Hover Effect / Animated Cursor
(function () {
const link = document.querySelectorAll('nav > .hover-this');
const cursor = document.querySelector('.cursor');
const animateit = function (e) {
const span = this.querySelector('span');
const { offsetX: x, offsetY: y } = e,
{ offsetWidth: width, offsetHeight: height } = this,
move = 25,
xMove = x / width * (move * 2) - move,
yMove = y / height * (move * 2) - move;
span.style.transform = `translate(${xMove}px, ${yMove}px)`;
if (e.type === 'mouseleave') span.style.transform = '';
};
const editCursor = e => {
const { clientX: x, clientY: y } = e;
cursor.style.left = x + 'px';
cursor.style.top = y + 'px';
};
link.forEach(b => b.addEventListener('mousemove', animateit));
link.forEach(b => b.addEventListener('mouseleave', animateit));
window.addEventListener('mousemove', editCursor);
})();
html, body {
margin: 0;
padding: 0;
cursor: none;
}
.nav-wrapper {
width: 100%;
height: 100vh;
background: #161616;
}
nav {
width: 100%;
margin: 0 auto;
text-align: center;
position: absolute;
top: 50%;
}
.hover-this {
transition: all 0.3s ease;
}
span {
display: inline-block;
font-family: "Monument Extended";
font-weight: 300;
color: #fff;
font-size: 36px;
text-transform: uppercase;
pointer-events: none;
transition: transform 0.1s linear;
}
.cursor {
pointer-events: none;
position: fixed;
padding: 0.3rem;
background-color: #fff;
border-radius: 50%;
mix-blend-mode: difference;
transition: transform 0.3s ease;
}
.hover-this:hover ~ .cursor {
transform: translate(-50%, -50%) scale(8);
}
#media(min-width: 900px) {
nav {
display: flex;
justify-content: space-around;
}
}
#media(max-width: 900px) {
nav {
top: 30%;
}
.hover-this {
width: 100%;
padding: 20px 0;
display: inline-block;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav-wrapper">
<nav>
<span>Home</span>
<span>Our Story</span>
<span>Studio</span>
<span>Contact</span>
<div class="cursor"></div>
</nav>
</div>
There is problem somewhere and i can't figure out where. As you can see now (when i copy this code correctly) we can't see the cursor on my site.
Can someone tell me what is the problem and how to fix it?
This is very important for my site because the site will be black and white, and this cursor effect is so important to me.
Thank you!
as far as i know that Divi theme provide a option in theme settings where we can add custom jQuery or javascript so you can directly add over there
this below link may help you to resolve issue
https://divi.space/tutorials/how-to-add-javascript-and-jquery-to-divi/
Related
function initializeParallax(clip) {
var parallax = clip.querySelectorAll('*[parallax]');
var parallaxDetails = [];
var sticky = false;
// Edge requires a transform on the document body and a fixed position element
// in order for it to properly render the parallax effect as you scroll.
// See https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/5084491/
if (getComputedStyle(document.body).transform == 'none')
document.body.style.transform = 'translateZ(0)';
var fixedPos = document.createElement('div');
fixedPos.style.position = 'fixed';
fixedPos.style.top = '0';
fixedPos.style.width = '1px';
fixedPos.style.height = '1px';
fixedPos.style.zIndex = 1;
document.body.insertBefore(fixedPos, document.body.firstChild);
for (var i = 0; i < parallax.length; i++) {
var elem = parallax[i];
var container = elem.parentNode;
if (getComputedStyle(container).overflow != 'visible') {
console.error('Need non-scrollable container to apply perspective for', elem);
continue;
}
if (clip && container.parentNode != clip) {
console.warn('Currently we only track a single overflow clip, but elements from multiple clips found.', elem);
}
var clip = container.parentNode;
if (getComputedStyle(clip).overflow == 'visible') {
console.error('Parent of sticky container should be scrollable element', elem);
}
// TODO(flackr): optimize to not redo this for the same clip/container.
var perspectiveElement;
if (sticky || getComputedStyle(clip).webkitOverflowScrolling) {
sticky = true;
perspectiveElement = container;
} else {
perspectiveElement = clip;
container.style.transformStyle = 'preserve-3d';
}
perspectiveElement.style.perspectiveOrigin = 'bottom right';
perspectiveElement.style.perspective = '1px';
if (sticky)
elem.style.position = '-webkit-sticky';
if (sticky)
elem.style.top = '0';
elem.style.transformOrigin = 'bottom right';
// Find the previous and next elements to parallax between.
var previousCover = parallax[i].previousElementSibling;
while (previousCover && previousCover.hasAttribute('parallax'))
previousCover = previousCover.previousElementSibling;
var nextCover = parallax[i].nextElementSibling;
while (nextCover && !nextCover.hasAttribute('parallax-cover'))
nextCover = nextCover.nextElementSibling;
parallaxDetails.push({
'node': parallax[i],
'top': parallax[i].offsetTop,
'sticky': !!sticky,
'nextCover': nextCover,
'previousCover': previousCover
});
}
// Add a scroll listener to hide perspective elements when they should no
// longer be visible.
clip.addEventListener('scroll', function() {
for (var i = 0; i < parallaxDetails.length; i++) {
var container = parallaxDetails[i].node.parentNode;
var previousCover = parallaxDetails[i].previousCover;
var nextCover = parallaxDetails[i].nextCover;
var parallaxStart = previousCover ? (previousCover.offsetTop + previousCover.offsetHeight) : 0;
var parallaxEnd = nextCover ? nextCover.offsetTop : container.offsetHeight;
var threshold = 200;
var visible = parallaxStart - threshold - clip.clientHeight < clip.scrollTop &&
parallaxEnd + threshold > clip.scrollTop;
// FIXME: Repainting the images while scrolling can cause jank.
// For now, keep them all.
// var display = visible ? 'block' : 'none'
var display = 'block';
if (parallaxDetails[i].node.style.display != display)
parallaxDetails[i].node.style.display = display;
}
});
window.addEventListener('resize', onResize.bind(null, parallaxDetails));
onResize(parallaxDetails);
for (var i = parallax.length - 1; i >= 0; i--) {
parallax[i].parentNode.insertBefore(parallax[i], parallax[i].parentNode.firstChild);
}
console.log("initialized!");
}
function onResize(details) {
for (var i = 0; i < details.length; i++) {
var container = details[i].node.parentNode;
var clip = container.parentNode;
var previousCover = details[i].previousCover;
var nextCover = details[i].nextCover;
var rate = details[i].node.getAttribute('parallax');
var parallaxStart = previousCover ? (previousCover.offsetTop + previousCover.offsetHeight) : 0;
var scrollbarWidth = details[i].sticky ? 0 : clip.offsetWidth - clip.clientWidth;
var parallaxElem = details[i].sticky ? container : clip;
var height = details[i].node.offsetHeight;
var depth = 0;
if (rate) {
depth = 1 - (1 / rate);
} else {
var parallaxEnd = nextCover ? nextCover.offsetTop : container.offsetHeight;
depth = (height - parallaxEnd + parallaxStart) / (height - clip.clientHeight);
}
if (details[i].sticky)
depth = 1.0 / depth;
var scale = 1.0 / (1.0 - depth);
// The scrollbar is included in the 'bottom right' perspective origin.
var dx = scrollbarWidth * (scale - 1);
// Offset for the position within the container.
var dy = details[i].sticky ?
// original was clip.scrollHeight? but it gave issues only for mobile b/c
// details[i].sticky was true
-(container.scrollHeight - parallaxStart - height) * (1 - scale) :
(parallaxStart - depth * (height - clip.clientHeight)) * scale;
console.log(container, dy);
console.log("container.scrollHeight", container.scrollHeight);
console.log("parallaxStart", parallaxStart);
console.log("height", height);
console.log("scale", scale);
console.log("parallaxStart", parallaxStart);
console.log("depth", depth);
console.log("height", height);
console.log("clip.clientHeight", clip.clientHeight);
console.log("scale", scale);
console.log(details[i].sticky);
details[i].node.style.transform = 'scale(' + (1 - depth) + ') translate3d(' + dx + 'px, ' + dy + 'px, ' + depth + 'px)';
}
}
window.onload = function() {
// setTimeout(function() {
// get all lazy image elements
const lazy_images = document.querySelectorAll('.lazy-image');
lazy_images.forEach(function(lazy_image) {
const imgLargeSrc = lazy_image.dataset.large;
// get small/lazy image
const small = lazy_image.querySelector('.img-small');
if (small == null) {
const imgSmall = new Image();
imgSmall.src = "//images.weserv.nl/?url=elenaariza.com" +
imgLargeSrc + "&w=25&fit=cover&output=png";
imgSmall.alt = imgLargeSrc;
imgSmall.classList.add("img-small");
imgSmall.onload = function() {
imgSmall.classList.add("loaded");
}
lazy_image.appendChild(imgSmall);
}
const imgLarge = new Image();
imgLarge.src = imgLargeSrc;
imgLarge.onload = function() {
// mark large image as loaded
imgLarge.classList.add('loaded');
};
// add large image to the lazy_image element
lazy_image.appendChild(imgLarge);
});
// },0);
};
/** Reset some basic elements */
/** body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, dl, dd, ol, ul, figure { margin: 0; padding: 0; } */
/** Basic styling */
p:last-child, ol:last-child, ul:last-child { margin-bottom: 0 !important; margin-right: 0 !important; }
html { height: 100%; overflow: hidden; }
body { font: 400 16px/1.5 "Avenir", Helvetica, Arial, sans-serif; color: #432814; -webkit-text-size-adjust: 100%; -webkit-font-feature-settings: "kern" 1; -moz-font-feature-settings: "kern" 1; -o-font-feature-settings: "kern" 1; font-feature-settings: "kern" 1; font-kerning: normal; background-color: #edece8; height: 100%; overflow: hidden; display: flex; flex-direction: column; }
/** Set `margin-bottom` to maintain vertical rhythm */
h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, dl, figure { margin-bottom: 20px; }
p { text-align: justify; text-justify: inter-word; margin-bottom: 20px; }
/** Images */
img { vertical-align: middle; margin-bottom: 10px; }
/** Lists */
ul, ol { margin-left: 40px; }
li > ul, li > ol { margin-bottom: 0; }
/** Headings */
h1, h2, h3, h4, h5, h6 { font-weight: 400; }
/** Wrapper */
.wrapper { max-width: -webkit-calc(1000px - (40px * 2)); max-width: calc(1000px - (40px * 2)); width: 100%; box-sizing: border-box; margin-right: auto; margin-left: auto; padding-right: 40px; padding-left: 40px; }
.page-content .wrapper { padding-top: calc(max(40px, 4vw)); padding-bottom: calc(max(40px, 4vw)); }
.site-footer .wrapper { padding-top: 40px; padding-bottom: 40px; }
.site-header .wrapper { position: relative; padding-top: 18.3333333333px; padding-bottom: 13.3333333333px; }
#media screen and (max-width: 600px) { .wrapper { max-width: -webkit-calc(1000px - (40px * 1.5)); max-width: calc(1000px - (40px * 1.5)); padding-right: 30px; padding-left: 30px; } }
/** Page content */
.page-content { position: relative; flex: 1 0 auto; }
.page-heading { font-size: 20px; }
/** Posts */
.post-header { margin-bottom: 40px; }
.post-title { font-size: 36px; letter-spacing: 0px; line-height: 1; }
#media screen and (max-width: 900px) { .post-title { font-size: 30px; } }
.post-content h2 { font-size: 32px; }
#media screen and (max-width: 900px) { .post-content h2 { font-size: 26px; } }
.post-content h3 { font-size: 24px; }
#media screen and (max-width: 900px) { .post-content h3 { font-size: 22px; } }
.post-content h4 { font-size: 20px; }
.post-content h4.with-description { margin-bottom: 0; }
#media screen and (max-width: 900px) { .post-content h4 { font-size: 18px; } }
.post-content h5 { font-size: 16px; text-indent: 25px; }
#media screen and (max-width: 900px) { .post-content h5 { font-size: 14px; } }
.post-content p { font-size: calc(max(1.1vw, 16px)); }
#media screen and (max-width: 900px) { .post-content p { font-size: 16px; } }
/** Parallax */
.viewport { height: 100%; overflow-x: hidden; overflow-y: scroll; position: relative; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; transform-style: preserve-3d; perspective: 1px; }
.scene { height: calc(min(90vw, 80vh)); }
.scene:not(.solid) { box-shadow: inset 0 0 50px rgba(100, 100, 100, 0.5); }
.parallax > img { object-position: 50% 50%; box-sizing: border-box; height: calc(min(105vw, 85vh)); margin-bottom: calc(max(-105vw, -85vh)); object-fit: cover; top: 0px; min-width: 100%; width: 100%; }
/** Lazy image loading */
.lazy-image { min-width: 100%; min-height: 100%; }
.lazy-image > img { position: absolute; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-out; -ms-transition: opacity 1s ease-out; transition: opacity 1s ease-out; object-fit: cover; opacity: 0; }
.lazy-image > img.loaded { opacity: 1; }
/** */
.header.parallax > img { height: 100vh; margin-bottom: -100vh; }
.header.scene { height: 90vh; }
#media screen and (max-width: 600px) { .header.parallax > img { height: 110vh; margin-bottom: -110vh; } .header.scene { height: 85vh; } }
.page-header.parallax > img { height: 60vh; margin-bottom: -60vh; }
.page-header.scene { height: 50vh; }
.solid { z-index: 1; position: relative; height: auto; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; min-height: 40vh; background-color: #fdfcfa; }
.img-small { filter: blur(20px); transform: scale(1); }
#btn-back-to-top { position: fixed; bottom: 40px; right: 40px; opacity: 0; transition: opacity 0.2s ease-out; z-index: 10; height: 52px; width: 52px; border-radius: 50%; background-color: #e67422; box-shadow: 0 0 20px 0px #e67422; visibility: hidden; }
#btn-back-to-top i.fa-arrow-up { color: white; }
div.toggle-content { diplay: flex; margin: 20px; font-size: 1.1rem; }
div.toggle-content > ul { border: none; margin-bottom: 25px; }
div.toggle-content h2 { font-size: 28px; }
#media screen and (max-width: 900px) { div.toggle-content h2 { font-size: 24px; } }
div.toggle-content h3 { margin-bottom: 10px; }
.toggle-wrapper h2 { align-items: center; color: #e67422; text-transform: none; font-weight: 300; cursor: pointer; transition: .2s; }
.toggle-wrapper p { line-height: 1.45; position: relative; overflow: hidden; max-height: 250px; will-change: max-height; contain: layout; display: block; opacity: 1; transform: translate(0, 0); padding: 0 40px 0 2 5px; transition: .3s opacity, .6s max-height; hyphens: auto; z-index: 2; }
.toggle-wrapper { width: 100%; display: flex; max-width: 700px; margin: auto; text-align: center; align-items: center; }
.toggle-wrapper ul { width: 100%; text-align: left; }
.transition, p, ul li i:before, ul li i:after { transition: all 0.3s; }
.toggle-wrapper .no-select, .toggle-wrapper h2 { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; user-select: none; }
.toggle-wrapper ul { list-style: none; perspective: 900; padding: 0; margin: 0; }
.toggle-wrapper > ul > li { position: relative; overflow: hidden; padding: 0; margin: 0; border: 1px #A096A0; border-bottom: 0px; border-style: solid none; -webkit-tap-highlight-color: transparent; }
.toggle-wrapper > ul > li:last-of-type { padding-bottom: 0; border-bottom: 1px solid #A096A0; margin-bottom: 10px; }
.toggle-wrapper > ul > li > i { position: absolute; transform: translate(-6px, 0); margin-top: 2.2rem; right: 15px; }
.toggle-wrapper > ul > li > i:before, .toggle-wrapper > ul > li > i:after { content: ""; position: absolute; background-color: #e67422; width: 3px; height: 9px; }
.toggle-wrapper ul li i:before { transform: translate(-2px, 0) rotate(45deg); }
.toggle-wrapper ul li i:after { transform: translate(2px, 0) rotate(-45deg); }
.toggle-wrapper ul li input[type=checkbox] { position: absolute; cursor: pointer; width: 100%; height: 100%; z-index: 1; opacity: 0; touch-action: manipulation; }
.toggle-wrapper ul li input[type=checkbox]:checked ~ div h2 { color: #432814; margin-bottom: 0px; }
.toggle-wrapper ul li input[type=checkbox]:checked ~ div :not(h2) { /*margin-top: 0;*/ max-height: 0; transition: .3s; opacity: 0; margin-bottom: 0px !important; margin-top: 0px !important; /*transform: translate(0, 50%);*/ }
.toggle-wrapper ul li input[type=checkbox]:checked ~ i:before { transform: translate(2px, 0) rotate(45deg); }
.toggle-wrapper ul li input[type=checkbox]:checked ~ i:after { transform: translate(-2px, 0) rotate(-45deg); }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>
<div class="viewport">
<!-- {% include header.html %} -->
<div class="page-content parallax-container">
<div class="parallax page-header lazy-image" data-large="https://elenaariza.com/img/Elena-Ariza-black-and-white-by-Anastasia-Chernyavsky.jpg" parallax="0.7">
<img src="//images.weserv.nl/?url=elenaariza.com/img/Elena-Ariza-black-and-white-by-Anastasia-Chernyavsky.jpg&w=25&fit=cover&output=png" class="img-small loaded">
</div>
<div class="scene page-header"></div>
<div class="scene solid">
<article class="post wrapper">
<div class="post-content">
<div class="toggle-wrapper">
<ul>
<li>
<input type="checkbox" checked>
<i></i>
<div class="toggle-content">
<h2>Concerti</h2>
<ul>
<li>Bloch: Schelomo Rhapsodie Hébraïque</li>
<li>Dvorak: Cello Concerto in B Minor</li>
<li>Elgar: Cello Concerto in E Minor, Op. 85</li>
<li>Haydn: Cello Concerto No. 1 in C Major</li>
<li>Haydn: Cello Concerto No. 2 in D Major</li>
<li>Herbert: Cello Concerto No. 2 in E Minor, Op. 30</li>
<li>Lalo: Cello Concerto in D Minor</li>
<li>Prokofiev: Sinfonia Concertante, Op. 125</li>
<li>Saint-Saens: Cello Concerto No. 1, Op. 33</li>
<li>Schumann: Cello Concerto in A minor, Op. 129</li>
<li>Tchaikovsky: Variations on a Rococo Theme, Op. 33</li>
</ul>
</div>
</li>
<li>
<input type="checkbox" checked>
<i></i>
<div class="toggle-content">
<h2>Sonatas / Works with Piano</h2>
<ul>
<li>Bach: Sonata for viola da gamba in D major BWV 1028</li>
<li>Barber: Cello Sonata Op. 6</li>
<li>Beethoven: Cello Sonata No. 1, 2, 3, 4, 5</li>
<li>Beethoven: 7 Variations on “Bei Männern”, WoO 46</li>
<li>Boccherini: Cello Sonata in A Major, G. 4</li>
<li>Boulanger: Three Pieces for Cello and Piano</li>
<li>Brahms: Cello Sonata No. 1 in E Minor, Op. 38</li>
<li>Brahms: Cello Sonata No. 2 in F Major, Op. 99</li>
<li>Bridge: Four Pieces for Cello and Piano</li>
<li>Carter: Cello Sonata</li>
<li>Cassadó: Requiebros</li>
<li>Chopin: Introduction and Polonaise Brillante in C Major, Op. 3</li>
<li>Chopin: Cello Sonata in G minor, Op. 65</li>
<li>Davidoff: At the Fountain Op. 20, No. 2</li>
<li>Debussy: Cello Sonata in D Minor</li>
<li>Franck: Sonata in A major for Violin and Piano</li>
<li>Francoeur: Sonata for Cello and Piano in E Major</li>
<li>Grieg: Cello Sonata in A minor, Op. 36</li>
<li>Janacek: Pohadka for Cello and Piano</li>
<li>Locatelli: Sonata for Cello and Piano</li>
<li>Mendelssohn: Cello Sonata No. 2 in D major, Op. 58</li>
<li>Mykola Lysenko: Elegy for Cello and Piano</li>
<li>Pärt: Fratres</li>
<li>Piazzolla: Le Grand Tango</li>
<li>Popper: Elfentanz, Op. 39</li>
<li>Prokofiev: Cello Sonata in C major, Op. 119</li>
<li>Rachmaninov: Cello Sonata, Op. 19</li>
<li>Schumann: Adagio and Allegro, Op. 70</li>
<li>Schumann: Fantasiestücke, Op. 73</li>
<li>Shostakovich: Sonata for Cello and Piano in D Minor, Op. 40</li>
<li>Schubert: Arpeggione Sonata in A Minor</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</article>
</div>
</div>
<!-- {% include footer.html %} -->
</div>
</body>
<script>
window.addEventListener('load', function() {
initializeParallax(document.querySelector('.viewport'));
});
</script>
</html>
Newbie to stackoverflow here, so please let me know if there are any issues with this question.
I'm encountering an issue where expanding the accordion on my website causes the parallax background image to jump downwards, because the website content height changes. However, what puzzles me is that this issue only happens on iOS (both Safari and Chrome apps). The parallax seems to be fine on Android and both Safari and Chrome on Mac.
I've implemented "performative parallax" that is described here.
GIF of issue
The actual website is accessible here. Code hosted on Github.
I'm not very experienced in HTML/CSS and/or JS, but I've fiddled around with the parallax JS/CSS to no avail.
I've also seen similar issues discussed here and here, but neither solution fixed the issue (or I may have done something incorrectly).
Thank you so much for your help!
EDIT (also in comment): Came up with a temporary solution – literally just added the code below to the JS. I know it's a hacky workaround, but works surprisingly well.
// create an Observer instance
const resizeObserver = new ResizeObserver(entries => {
// console.log('Body height changed:', entries[0].target.clientHeight);
onResize(parallaxDetails);
});
// start observing a DOM node
resizeObserver.observe(document.getElementsByClassName("parallax-container")[0]);
THE WHOLE CODE IN JSFIDDLE
I have been struggling to effectively remove the code and css created in the function Seifenblasen_blasen()
function Seifenblasen_blasen(){
btn1.style.display = 'none';
document.getElementById("text").innerHTML="Bubble"
const section = document.querySelector('section')
const createElement = document.createElement('spawn')
var size = Math.random() * 60;
createElement.style.width = 30 + size + 'px';
createElement.style.height = 30 + size + 'px';
createElement.style.left = Math.random() * innerWidth + "px";
section.appendChild(createElement);
setTimeout(() => {
createElement.remove()
},8000)
}
const Blaseninterval = setInterval(Seifenblasen_blasen, 100)
created CSS:
section {
width: 100%;
height: 100vh;
overflow: hidden;
background: #1F69FA;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
section.text{
font-size: 10em;
color: #333;
margin: 0 auto;
text-align: center;
font-family: consolas;
background-color:#1F69FA;
pointer-events: none;
border: none;
}
section spawn {
position: absolute;
bottom: -80px;
background: transparent;
border-radius: 50%;
pointer-events: none;
box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.5);
animation: animate 4s linear infinite;
}
section spawn:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
transform: scale(0.25) translate(-70%, -70%);
background: radial-gradient(#fff, transparent);
opacity: 0.6;
border-radius: 50%;
}
#keyframes animate {
0% {
transform: translateY(0%);
opacity: 1;
}
99% {
opacity: 1;
}
100% {
transform: translateY(-2000%);
opacity: 0;
}
section span {
margin-top: 700px;
font-size: 1em;
color: #333;
margin: 0 auto;
font-family: consolas;
background-color: #1F69FA;
border: none;
position: absolute;
}
HTML:
<section id="section">
<div class="content">
<button id="btn"></button>
<button id="btn1"></button>
</div>
</section>
to then execute the next function function next(). This removal is needed because when I don't remove the elements from the first function the second wont work. I could just do document.head.innerHTML = "" but that would then also remove the css needed for the button appearing in the next function. So then I tried to make variables with const
const btn = document.getElementById('text');
const btn1 = document.getElementById('text1');
const section = document.querySelector('section')
// in function Seifenblasen_blasen()
btn1.style.display = 'none';
// in function next()
section.style.display = 'none';
btn.style.display = 'none';
btn1.style.display = 'block';
to hide and show only parts of the css without removing the css entirely to keep the styling intact, but now nothing works anymore.(the button on the next Screen doesn't show up at all and the first button does not contain any styling) My endgoal is that I can essentially switch between two screens one showing the bubbles and one the bouncy balls and when I click on the button it goes on. (for example start is bubbles. I click -> Bounce, click again -> back to Bubbles and so on)
I'm trying recoding the https://www.orizon.co/ following dot. The code I've written to asure the dot rising effect when the pointer fly over some elements seems correct, but when the dot's z-index is higher than the flew over element's one, there is a kind of bug than make me crazy.
class CursorFollower {
constructor() {
this.follower = document.getElementById("cursor-follower");
this.topGap = 12;
this.leftGap = 4;
window.addEventListener("mousemove", this.follow.bind(this));
this.eventsSet();
}
// The function doing the dot follows the pointer
follow() {
setTimeout(function () {
cursorFollower.follower.style.left = (this.clientX - cursorFollower.topGap) + "px";
cursorFollower.follower.style.top = (this.clientY - cursorFollower.leftGap) + "px";
}.bind(window.event), 100);
}
eventsSet() {
// Adding events to button
var button = document.querySelector(".follower-over");
button.addEventListener("pointerenter", this.overOn.bind(this));
button.addEventListener("pointerleave", this.overOff.bind(this));
}
overOn() {
// The effects to apply when the pointer flies over the button
this.follower.style.opacity = 0.3;
this.follower.style.width = "50px";
this.follower.style.height = "50px";
this.follower.style.backgroundColor = "black";
this.topGap = 25;
this.leftGap = 25;
}
overOff() {
// The effects to apply when the pointer leave the button
this.follower.style.opacity = 1;
this.follower.style.width = "7px";
this.follower.style.height = "7px";
this.follower.style.backgroundColor = "rgba(42, 0, 212, 1)";
this.topGap = 12;
this.leftGap = 4;
}
}
let cursorFollower = new CursorFollower();
/* Some styling */
.contact-us{
padding: 25px 40px;
width: 200px;
display: flex;
align-items: center;
color: white;
background-color: #2b00d4 ;
height: 60px;
position: relative;
z-index: 1;
}
#cursor-follower{
z-index: 999;
position: fixed;
background-color: #2b00d4;
height: 7px;
width: 7px;
border-radius: 50%;
transition: opacity 0.3s , width 0.3s , height 0.3s, background-color 0.3s;
}
<div id="cursor-follower"></div>
<div class="contact-us follower-over">
<p>CONTACT US</p>
</div>
When the button's z-index is higher than the dot's one, the effects works. Else, it bugs
This is because your follower element is getting under cursor, triggering overOff than when its shrinks it triggers overOn and so on.
The simplest solution is to add pointer-events: none; into the follower so it doesn't trigger overOn/overOff:
class CursorFollower {
constructor() {
this.follower = document.getElementById("cursor-follower");
this.topGap = 12;
this.leftGap = 4;
window.addEventListener("mousemove", this.follow.bind(this));
this.eventsSet();
}
// The function doing the dot follows the pointer
follow() {
setTimeout(function() {
cursorFollower.follower.style.left = (this.clientX - cursorFollower.topGap) + "px";
cursorFollower.follower.style.top = (this.clientY - cursorFollower.leftGap) + "px";
}.bind(window.event), 100);
}
eventsSet() {
// Adding events to button
var button = document.querySelector(".follower-over");
button.addEventListener("pointerenter", this.overOn.bind(this));
button.addEventListener("pointerleave", this.overOff.bind(this));
}
overOn() {
// The effects to apply when the pointer flies over the button
this.follower.style.opacity = 0.3;
this.follower.style.width = "50px";
this.follower.style.height = "50px";
this.follower.style.backgroundColor = "black";
this.topGap = 25;
this.leftGap = 25;
}
overOff() {
// The effects to apply when the pointer leave the button
this.follower.style.opacity = 1;
this.follower.style.width = "7px";
this.follower.style.height = "7px";
this.follower.style.backgroundColor = "rgba(42, 0, 212, 1)";
this.topGap = 12;
this.leftGap = 4;
}
}
let cursorFollower = new CursorFollower();
/* Some styling */
.contact-us {
padding: 25px 40px;
width: 200px;
display: flex;
align-items: center;
color: white;
background-color: #2b00d4;
height: 60px;
position: relative;
z-index: 1;
}
#cursor-follower {
pointer-events: none; /* added */
z-index: 999;
position: fixed;
background-color: #2b00d4;
height: 7px;
width: 7px;
border-radius: 50%;
transition: opacity 0.3s, width 0.3s, height 0.3s, background-color 0.3s;
}
<div id="cursor-follower"></div>
<div class="contact-us follower-over">
<p>CONTACT US</p>
</div>
However there is even simpler solution with much less javascript:
window.addEventListener("mousemove", e => {
setTimeout(s => {
document.documentElement.style.setProperty("--cursorX", e.clientX + "px");
document.documentElement.style.setProperty("--cursorY", e.clientY + "px");
}, 100);
});
/* Some styling */
:root
{
--cursorX: -100px;
--cursorY: -100px;
}
.contact-us {
padding: 25px 40px;
width: 100px;
display: flex;
align-items: center;
color: white;
background-color: #2b00d4;
height: 40px;
position: relative;
z-index: 1;
}
.cursor-follower {
--size: 7px;
--gapLeft: 12px;
--gapTop: 4px;
pointer-events: none;
position: fixed;
background-color: #2b00d4;
width: var(--size);
height: var(--size);
border-radius: 50%;
transition: opacity 0.3s, width 0.3s, height 0.3s, background-color 0.3s;
top: calc(var(--cursorY) - var(--gapTop));
left: calc(var(--cursorX) - var(--gapLeft));
}
.follower-over:hover~.cursor-follower {
--size: 50px;
--gapLeft: 25px;
--gapTop: 25px;
opacity: 0.3;
background-color: black;
z-index: 2;
}
/* extra */
.follower-over.green:hover~.cursor-follower {
background-color: green;
opacity: 0.7;
--size: 80px;
--gapLeft: 40px;
--gapTop: 40px;
}
.contact-us:not(.follower-over) {
background-color: pink;
}
.contact-us {
display: inline-block;
margin: 1em;
}
<div class="contact-us follower-over">
<p>CONTACT US</p>
</div>
<div class="contact-us follower-over">
<p>Another button</p>
</div>
<div class="contact-us">
<p>No follower</p>
</div>
<div class="contact-us follower-over green">
<p>Large green</p>
</div>
<div class="cursor-follower"></div>
The only caveat with this method is the .cursor-follower must be last element and has the same parent as all .follower-over elements
I have been trying to replicate some material design buttons but have run into an issue with the div that is generated to create the "ripple" effect. If you go to my codepen at https://codepen.io/AlexStiles/pen/oPomzX you will see the issue.
This is caused by the div (I tried deleting it and it fixed the problem). I have tried adding a variety of properties such as font-size and line-height to no avail. Interestingly, depending on your browser the issue seems to have a different effect. On safari the width increases hugely then it decreases to the chrome width.
"use strict";
const buttons = document.getElementsByTagName("button");
const overlay = document.getElementsByClassName("overlay");
const animationTime = 600;
for (let i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", createRipple);
};
let circle = document.createElement("div");
function createRipple(e) {
this.appendChild(circle);
var d = Math.max(this.scrollWidth, this.scrollHeight);
circle.style.width = circle.style.height = d + "px";
circle.style.left = e.clientX - this.offsetLeft - d / 2 + "px";
circle.style.top = e.clientY - this.offsetTop - d / 2 + "px";
circle.classList.add("ripple");
// setTimeout(function(){
// for (let i = 0; i < circle.length; i++)
// document.getElementsByClassName("ripple")[i].remove();
// }, animationTime);
}
button {
background-color: #4888f1;
border-radius: 24px;
display: flex;
align-items: center;
outline: 0;
border: 0;
padding: 10px 22px;
cursor: pointer;
overflow: hidden;
position: relative;
}
button .ripple {
position: absolute;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.5);
transform: scale(0);
animation: ripple 0.5s linear;
font-size: 0;
line-height: 0;
}
#keyframes ripple {
to {
transform: scale(2.5);
opacity: 0;
}
}
button img {
width: 20px;
height: 20px;
}
button *:not(:last-child) {
margin: 0 8px 0 0;
}
button span {
color: #fff;
font-family: Futura;
}
#media screen and (min-width: 1280px) {
button {
padding: 0.8vw 1.75vw;
border-radius: 1.9vw;
} button img {
width: 1.55vw;
height: auto;
} button span {
font-size: 0.8vw;
}
}
<html>
<head>
<title>Material Design Components</title>
<link rel="stylesheet" href="style.css">
</head>
<button>
<span>Add to Cart</span>
</button>
<script src="js.js"></script>
</html>
Change
button *:not(:last-child) {
margin: 0 8px 0 0;
}
To,
button *:not(:last-child) {
margin: 0 0 0 0;
}
Checked in firefox.
When you add the ripple element you make it the last-child thus the rule of margin button *:not(:last-child) will apply to span since this one is no more the last child.
To fix this remove margin from the span:
"use strict";
const buttons = document.getElementsByTagName("button");
const overlay = document.getElementsByClassName("overlay");
const animationTime = 600;
for (let i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", createRipple);
};
let circle = document.createElement("div");
function createRipple(e) {
this.appendChild(circle);
var d = Math.max(this.scrollWidth, this.scrollHeight);
circle.style.width = circle.style.height = d + "px";
circle.style.left = e.clientX - this.offsetLeft - d / 2 + "px";
circle.style.top = e.clientY - this.offsetTop - d / 2 + "px";
circle.classList.add("ripple");
// setTimeout(function(){
// for (let i = 0; i < circle.length; i++)
// document.getElementsByClassName("ripple")[i].remove();
// }, animationTime);
}
button {
background-color: #4888f1;
border-radius: 24px;
display: flex;
align-items: center;
outline: 0;
border: 0;
padding: 10px 22px;
cursor: pointer;
overflow: hidden;
position: relative;
}
button .ripple {
position: absolute;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.5);
transform: scale(0);
animation: ripple 0.5s linear;
font-size: 0;
line-height: 0;
}
#keyframes ripple {
to {
transform: scale(2.5);
opacity: 0;
}
}
button img {
width: 20px;
height: 20px;
}
button *:not(:last-child) {
margin: 0 8px 0 0;
}
button span:first-child {
color: #fff;
font-family: Futura;
margin:0;
}
#media screen and (min-width: 1280px) {
button {
padding: 0.8vw 1.75vw;
border-radius: 1.9vw;
} button img {
width: 1.55vw;
height: auto;
} button span {
font-size: 0.8vw;
}
}
<html>
<head>
<title>Material Design Components</title>
<link rel="stylesheet" href="style.css">
</head>
<button>
<span>Add to Cart</span>
</button>
<script src="js.js"></script>
</html>
If a user, using iPhone (actual devices), lands on my website for the first time the "hamburger menu" will not open the menu at all, and navbar will not appear on scrolldown. It seems to be working just fine on Android devices (except maybe Nexus 4 in portrait mode if we were to believe responsinator ), and Win desktops.
The actual website's backend is made with Razor/ASP.NET but obviously I believe this is a pure frontend issue.
After a refresh it starts to work on Apple devices (well, iPhone) as well. And then sometimes stops working (once or twice it stopped working again, I believe).
Head (tried removing async and defer, did not work):
<script type="text/javascript" src="script.js" async defer></script>
Here is HTML (with bad usage of h2 tag with logo image in it):
<div id="navigation-main">
<h2 class="logo">
<a href="#">
<img src="images/white-logo.png" alt="">
</a>
</h2>
<div id="menu-icon">
<span class="icon-menu-hamburguer"></span>
</div>
<nav id="menu-main">
<ul>
<li><a class="scroll" href="#about-anchor">About us</a></li>
<li><a class="scroll" href="#agenda-anchor">Agenda</a></li>
<li><a class="scroll" href="#gallery-anchor">Gallery</a></li>
<li><a class="scroll" href="#sponsors-anchor">Sponsors</a></li>
<li><a class="scroll" href="#contact-anchor">Contact</a></li>
<li>Log in <img src="images/login_icon.png" alt=""></li>
</ul>
</nav>
CSS:
#navigation-main {
min-height: 60px;
z-index: 9;
overflow: hidden;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
#navigation-main:active {
background-color: #000000;
}
#navigation-main .logo {
float: left;
}
#navigation-main .logo img {
display: none;
}
#navigation-main nav {
position: relative;
top: 20px;
}
#navigation-main nav ul {
margin: 0;
padding-left: 0;
}
#navigation-main nav ul li {
list-style: none
}
#navigation-main nav ul li a {
color: #FFFFFF;
text-decoration: none
}
#navigation-main #menu-icon {
display: none;
}
#navigation-main.active {
background-color: rgb(0, 0, 0);
position: fixed;
top: 0;
height: 60px;
width: 100%;
margin-bottom: 0;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
#navigation-main.active img {
display: inline-block;
}
#navigation-main.active #menu-icon {
top: 10px;
}
#navigation-main.active .logo img {
max-width: 50%;
}
#navigation-main.active nav li a {
color: #FFFFFF
}
#navigation-main nav ul li img {
vertical-align: middle;
}
#media (max-width: 768px) {
#navigation-main .logo img {
max-width: 80%
}
#navigation-main #menu-icon {
padding: 18px 12px;
margin: 2px 0;
position: relative;
top: 20px;
display: block;
float: right;
z-index: 10;
cursor: pointer;
}
#navigation-main #menu-icon .icon-menu-hamburguer {
background: #ff0000;
width: 30px;
height: 4px;
margin: 2px 0;
display: block;
}
#navigation-main #menu-icon .icon-menu-hamburguer:after,
#navigation-main #menu-icon .icon-menu-hamburguer:before {
content: '';
background: #ff0000;
width: 30px;
height: 4px;
display: block;
margin: 2px 0;
position: relative;
}
#navigation-main #menu-icon .icon-menu-hamburguer:before {
bottom: 8px;
}
#navigation-main #menu-icon .icon-menu-hamburguer:after {
top: 2px;
}
#navigation-main nav {
display: none;
width: 100%;
}
#navigation-main nav.menu-active {
display: block;
clear: both;
height: 100%;
position: fixed;
z-index: 1;
left: 0;
top: 0;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.80);
overflow-x: hidden;
}
#navigation-main nav.menu-active ul {
position: relative;
top: 15%;
width: 100%;
text-align: center;
margin-top: 30px;
}
#navigation-main nav.menu-active a {
padding: 8px;
text-decoration: none;
font-size: 1.75rem;
display: block;
}
}
#media (min-width: 768px) {
#navigation-main nav {
float: right;
padding-right: 20px;
}
#navigation-main nav ul li,
#navigation-main nav ul li img {
display: inline-block;
}
#navigation-main nav ul li a {
padding: 0 5px;
font-size: 0.9rem;
}
}
Javascript:
(function() {
////////// Sticky navbar and hamburger icon
var headerScroll = getId('navigation-main'),
scrollHeight = 250,
menuIcon = getId('menu-icon'),
menuMain = getId('menu-main'),
classMenu = 'menu-active',
classHeader = 'active';
// Scroll
window.addEventListener("scroll", scrollOn);
function scrollOn() {
animatedScroll(headerScroll, classHeader, scrollHeight);
}
// Responsive menu
menuIcon.onclick = function() {
toggle(menuMain, classMenu);
}
menuMain.onclick = function() {
toggle(menuMain, classMenu);
}
// Moving the element after scrolling
function animatedScroll(element, classN, height) {
y = pageYOffset;
if (y > height) {
element.className = classN;
} else {
element.className = '';
}
}
// Change the element's class
function toggle(element, classe) {
element.className = element.className ? '' : classe;
}
// Return the element
function getId(id) {
return document.getElementById(id);
}
////////// Sticky navbar and hamburger icon
// Feature Test
if ('querySelector' in document && 'addEventListener' in window && Array.prototype.forEach) {
// Function to animate the scroll
var smoothScroll = function(anchor, duration) {
// Calculate how far and how fast to scroll
var startLocation = window.pageYOffset;
var endLocation = anchor.offsetTop;
var distance = endLocation - startLocation;
var increments = distance / (duration / 16);
var stopAnimation;
// Scroll the page by an increment, and check if it's time to stop
var animateScroll = function() {
window.scrollBy(0, increments);
stopAnimation();
};
// If scrolling down
if (increments >= 0) {
// Stop animation when you reach the anchor OR the bottom of the page
stopAnimation = function() {
var travelled = window.pageYOffset;
if ((travelled >= (endLocation - increments)) || ((window.innerHeight + travelled) >= document.body.offsetHeight)) {
clearInterval(runAnimation);
}
};
}
// If scrolling up
else {
// Stop animation when you reach the anchor OR the top of the page
stopAnimation = function() {
var travelled = window.pageYOffset;
if (travelled <= (endLocation || 0)) {
clearInterval(runAnimation);
}
};
}
// Loop the animation function
var runAnimation = setInterval(animateScroll, 16);
};
// Define smooth scroll links
var scrollToggle = document.querySelectorAll('.scroll');
// For each smooth scroll link
[].forEach.call(scrollToggle, function(toggle) {
// When the smooth scroll link is clicked
toggle.addEventListener('click', function(e) {
// Prevent the default link behavior
e.preventDefault();
// Get anchor link and calculate distance from the top
var dataID = toggle.getAttribute('href');
var dataTarget = document.querySelector(dataID);
var dataSpeed = toggle.getAttribute('data-speed');
// If the anchor exists
if (dataTarget) {
// Scroll to the anchor
smoothScroll(dataTarget, dataSpeed || 500);
}
}, false);
});
}
})();
And here is JSFiddle.
If it's touchstart/onclick issue why does it work after the refresh? Should I remove IFFE? Should I put script tag at the end of the page?
What seems to be the issue here?
Apparently the line in the header was an issue.I have removed "async" and the navigation menu started working.
<script type="text/javascript" src="script.js" async defer></script>
changed to:
<script type="text/javascript" src="script.js" defer></script>