I have a simple div that simulates the ripple effect of material design along with "touchstart" and "touchend" events. But I don't know how to restart the animation if the user clicks several times.
.test-ripple{
position: relative;
display: flex;
align-items: center;
width: 50px;
height: 50px;
overflow: hidden;
border-radius: 50%;
}
.test-ripple:before {
display: none;
}
.test-ripple:after {
position: absolute;
content: "";
cursor: pointer;
background-image: none;
background-color: rgba(0, 0, 0, 0);
width: 78%;
height: 78%;
border-radius: 50%;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
transform: scale(0.3);
transition: linear 350ms forwards;
}
.test-ripple.ativo:after {
background-color: rgba(0, 0, 0, 0.2);
transform: scale(1);
transition: 150ms;
}
.test-ripple.fade-out:after {
background-color: rgba(0, 0, 0, 0);
transition: 300ms;
}
<div class="test-ripple">
<i class="material-icons">add</i>
</div >
var ripple = document.querySelectorAll(".test-ripple")
ripple.forEach((item) => {
item.addEventListener("touchstart", () => {
item.classList.add("ativo");
});
item.addEventListener("touchend", () => {
setTimeout(function () {
item.classList.add("fade-out");
setTimeout(function () {
item.classList.remove("ativo");
item.classList.remove("fade-out");
}, 150);
}, 100);
});
});
How to make the transition repeat each time the user clicks?
Hmmm with what I have seen so far their no special code for that, just write your code add only one call function from the animation to start so when the user click's again it definitely will restart automatically
Related
Hello, I'm currently practicing coding my own site, but i've ran into a problem. I added an auto fade in scroll to top button which works fine on desktop, but on mobile once it's activated the scroll gets stuck at the top. Any idea whats causing it to get stuck, here is my coding.
Sorry in advanced, im very new to this.
The Script
<script>
const scrollTop = function () {
// create HTML button element
const scrollBtn = document.createElement("button");
scrollBtn.innerHTML = "↑";
scrollBtn.setAttribute("id", "scroll-btn");
document.body.appendChild(scrollBtn);
// hide/show button based on scroll distance
const scrollBtnDisplay = function () {
window.scrollY > window.innerHeight
? scrollBtn.classList.add("show")
: scrollBtn.classList.remove("show");
};
window.addEventListener("scroll", scrollBtnDisplay);
// scroll to top when button clicked
const scrollWindow = function () {
if (window.scrollY != 0) {
setTimeout(function () {
window.scrollTo(0, window.scrollY - 50);
scrollWindow();
}, 10);
}
};
scrollBtn.addEventListener("click", scrollWindow);
};
scrollTop(); scrollTop: scrolled;
</script>
</body>
</html>
</head>
</html>
CSS
section::after {
content: "";
display: table;
clear: both;
}
#scroll-btn {
opacity: 0;
width: 60px;
height: 60px;
color: #fff;
background-color: #c066c0;
position: fixed;
bottom: 10%;
right: 10%;
border: 2px solid #fff;
border-radius: 50%;
font: bold 40px monospace;
transition: opacity 0.5s, transform 0.5s;
overflow: hidden;
}
#scroll-btn.show {
opacity: 1;
transition: opacity 1s, transform 1s;
overflow: hidden;
}
Can anyone tell what the problem is?? Thanks so much!
A simple example of scroll to top
const scrollToTop = document.querySelector(".scroll-to-top");
window.addEventListener("scroll", () => {
if (window.scrollY > 200) {
scrollToTop.classList.add("visible");
} else {
scrollToTop.classList.remove("visible");
}
});
scrollToTop.addEventListener("click", () => {
window.scroll({
top: 0,
left: 0,
behavior: "smooth"
});
});
#import "https://cdn.jsdelivr.net/gh/KunalTanwar/normalize/css/normalize.inter.min.css";
body {
height: 200vh;
}
.scroll-to-top {
--size: 48px;
position: fixed;
border: 0;
right: 32px;
bottom: 32px;
z-index: 9999;
display: grid;
border-radius: 50%;
width: var(--size);
place-items: center;
height: var(--size);
aspect-ratio: 1/1;
transform: scale(0);
will-change: transform;
background-color: white;
transition: transform 250ms ease;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.15);
}
.scroll-to-top svg {
width: 24px;
height: 24px;
pointer-events: none;
}
.scroll-to-top.visible {
transform: scale(1);
}
<button class="scroll-to-top">
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512">
<path d="M448 368L256 144 64 368h384z" />
</svg>
</button>
I am having a problem with my side nav i made with Jquery it works fine on a laptop or a desktop but on mobile device the transition is not smooth like in the desktops or laptops I don’t know what is causing the problem
if you wondering i did the side nav by toggling a class which takes the position of the side nav from left:-30%; to 30%
I really wanted to show you the difference in performance. Check out my demo. Click a box to see it move. Even on my new MacBook Air, I can tell the difference. On mobile, as you noticed, the difference is much more pronounced.
$(".box").on("click", function() {
$(this).addClass("start");
})
$(".reset").on("click", function() {
$(".box").removeClass("start");
})
#keyframes moveWithLeft {
from {
left: 0;
}
to {
left: calc(100vw - var(--box-width));
}
}
#keyframes moveWithTransform {
to {
transform: translate(calc(100vw - var(--box-width)));
}
}
.box {
--box-width: 80px;
--box-height: 70px;
width: var(--box-width);
height: var(--box-height);
line-height: var(--box-height);
background-color: rgba(0, 128, 0, 1);
position: absolute;
color: white;
display: inline-block;
cursor: pointer;
font-family: helvetica;
transition: 0.3s background-color ease-in-out;
}
.box:hover {
background-color: rgba(0, 128, 0, .8);
}
.box span {
text-align: center;
display: block;
font-size: 85%;
}
.box.two {
top: calc(var(--box-height) + 5px);
}
.one.start {
animation: 3s moveWithLeft forwards;
}
.two.start {
animation: 3s moveWithTransform forwards;
}
button {
position: fixed;
bottom: 0;
left: 0;
font-size: 1.2rem;
font-family: helvetica;
padding: 10px;
border: none;
}
html, body {
margin: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box one"><span>Left</span></div>
<div class="box two"><span>Transform</span></div>
<button class="reset">Reset</button>
jsFiddle
.parentDiv {
transition: 300ms all;
}
Searched all over the internet, and I can't beat this issue.
I have a pricing section with a pricing plan switch. The logic itself is working fine, however, the CSS checkbox toggle itself isn't switching from left to right.
I assume it has to do with the CSS itself or the way I select the elements with JS. I've also read some topics on SO where they say that it's a checkbox issue with WordPress, didn't find my answer there, unfortunately.
The issue
On Chrome desktop, the CSS checkbox toggle isn't working.
On Safari, iPhone X the CSS checkbox switch checkbox does work but only if you click the label elements with text
Here's a link to the page
Link to Dropbox of me demonstrating the issue on iPhone
window.onload = function() {
var e = document.getElementById("firstPlan"),
d = document.getElementById("secondPlan"),
t = document.getElementById("switcher_iOS"),
m = document.getElementById("firstPlan_box"),
y = document.getElementById("secondPlan_box");
if (document.getElementById("switcher_iOS") == null) {
var node = document.createElement("input");
node.id = "switcher_iOS";
node.type = "checkbox";
node.className = "toggle_iOS--check";
var elm = document.getElementsByClassName('toggle_iOS')[0];
elm.insertBefore(node, elm.firstChild)
t = document.getElementById("switcher_iOS");
}
e.addEventListener("click", function() {
t.checked = false;
e.classList.add("togglePricing--is-active");
d.classList.remove("togglePricing--is-active");
m.classList.remove("hide");
y.classList.add("hide");
});
d.addEventListener("click", function() {
t.checked = true;
d.classList.add("togglePricing--is-active");
e.classList.remove("togglePricing--is-active");
m.classList.add("hide");
y.classList.remove("hide");
});
t.addEventListener("click", function() {
d.classList.toggle("togglePricing--is-active");
e.classList.toggle("togglePricing--is-active");
m.classList.toggle("hide");
y.classList.toggle("hide");
t.checked = !t.checked;
})
}
/* Toggle */
#switcher_iOS {
width: 100%;
}
.toggle_iOS,
.togglePricing {
display: inline-block;
vertical-align: middle;
margin: 10px;
}
.togglePricing {
color: #ccc9c9;
cursor: pointer;
transition: .1s;
font-weight: bold;
font-size: 17px;
}
.togglePricing--is-active {
color: #181818;
}
.toggle_iOS {
position: relative;
width: 58px;
height: 28px;
border-radius: 100px;
background-color: #1D8BF1;
overflow: hidden;
box-shadow: inset 0 0 2px 1px rgba(0, 0, 0, 0.05);
}
.toggle_iOS--check {
position: absolute;
display: block;
cursor: pointer;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
z-index: 6;
}
.toggle_iOS--check:checked~.toggle_iOS--switch {
right: 2px;
left: 57.5%;
transition: 0.15s cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition-property: left, right;
transition-delay: .01s, 0s;
}
.toggle_iOS--switch {
position: absolute;
left: 2px;
top: 2px;
cursor: pointer;
bottom: 2px;
right: 57.5%;
background-color: #fff;
border-radius: 36px;
z-index: 1;
transition: 0.15s cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition-property: left, right;
transition-delay: 0s, .01s;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
<label class="togglePricing togglePricing--is-active" id="firstPlan">Payment Plan</label>
<div class="toggle_iOS">
<label for="switcher_iOS"><input type="checkbox" onclick="void(0);" id="switcher_iOS" class="toggle_iOS--check" checked></label><b onclick="void(0);" class="toggle_iOS--switch"></b>
</div>
<label class="togglePricing" id="secondPlan">One Payment</label>
I have simplified your css, and in order for this to work, you have to remove your JS that reset the state of the checkbox from the checkbox on click event such as
t.checked = !t.checked;
var t = document.getElementById("switcher_iOS");
t.addEventListener("click", function(){
console.log("i am", this.checked);
})
.toggle_iOS{
position: relative;
width: 58px;
height: 28px;
border-radius: 100px;
background-color: #1D8BF1;
overflow: hidden;
box-shadow: inset 0 0 2px 1px rgba(0,0,0,0.05);
}
.toggle_iOS--switch{
position: absolute;
left: 2px;
top: 2px;
cursor: pointer;
bottom: 2px;
right: 57.5%;
background-color: #fff;
border-radius: 36px;
z-index: 1;
transition: 0.15s cubic-bezier(0.785,0.135,0.15,0.86);
transition-property: left,right;
transition-delay: 0s,.01s;
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
[type=checkbox]:checked + .toggle_iOS--switch{
left: 57.5%;
right: 2px;
}
.toggle_iOS [type=checkbox]{
position: absolute;
display: block;
cursor: pointer;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
z-index: 6;
}
<div class="toggle_iOS">
<input type="checkbox" id="switcher_iOS">
<div class="toggle_iOS--switch"></div>
</div>
I'm trying to create a particular effect but I'm getting stuck. Essentially what is supposed to happen is when the user clicks on the nav (in the snippet below, I've made it so you just click on the body) the:
main screen shrinks
an off canvas menu slides in from the left
A semi transparent overlay appears
My problem is with the scale effect. The effect I am trying to achieve is when the window shrinks, you can see the entirety of the window, just a miniature version. The closest I've been able to get is the snippet, where the window shrinks, but it's still fully scroll-able rather than the window shrinking proportionally to become a miniature version
The way I have it now, you can still scroll the entirety of the page but I'm going to take care of that with a e.preventDefault but I'd like to get the screen-shrink in order first.
Can anyone help?
$(document).ready(function() {
var pageContainer = $('.page-container');
var offCanvas = $('.off-canvas');
pageContainer.click(function() {
offCanvas.toggleClass('menuActive')
pageContainer.toggleClass('pc-active');
});
});
* {
padding: 0;
margin: 0;
}
.off-canvas {
position: absolute;
left: 0;
top: 0;
height: 100vh;
width: 300px;
background-color: blue;
transition: all .3s ease;
transform: translate3d(-300px, 0, 0);
z-index: 10;
}
.menuActive {
transform: translate3d(0, 0, 0);
}
.page-container {
border: 4px solid;
height: 100%;
width: 100%;
min-height: 1200px;
background-color: #ccc;
transform: scale3d(1, 1, 1);
transition: all .4s ease;
}
.pc-active {
transform: scale3d(.9, .9, .1)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="off-canvas"></div>
<div class="page-container"></div>
You can make use of margin-left to move the miniature to the offset of your sidenavbar on toggle, as well as scale it to your desired value by setting a minimum-height in terms of vh with transform-origin as top left.
$(document).ready(function() {
var pageContainer = $('.page-container');
var offCanvas = $('.off-canvas');
pageContainer.click(function() {
offCanvas.toggleClass('menuActive')
pageContainer.toggleClass('pc-active');
});
});
* {
padding: 0;
margin: 0;
}
.off-canvas {
position: absolute;
left: 0;
top: 0;
height: 100vh;
width: 300px;
background-color: blue;
transition: all .3s ease;
transform: translate3d(-300px, 0, 0);
z-index: 10;
}
.menuActive {
transform: translate3d(0, 0, 0);
}
.page-container {
border: 4px solid;
height: 100%;
width: 100%;
min-height: 1200px;
background-color: #ccc;
transform: scale3d(1, 1, 1);
transition: all .4s ease;
text-align:center;
}
.pc-active {
margin-left:310px;
transform-origin:left top;
min-height:90vh;
transform: scale(0.4,0.4);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="off-canvas"></div>
<div class="page-container">
<h3> Page content</h3>
Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff
</div>
You can set the width/height in vw/vh unit to resize it according to the window
See code snippet:
$(document).ready(function() {
var pageContainer = $('.page-container');
var offCanvas = $('.off-canvas');
pageContainer.click(function() {
offCanvas.toggleClass('menuActive')
pageContainer.toggleClass('pc-active');
});
});
* {
padding: 0;
margin: 0;
}
.off-canvas {
position: absolute;
left: 0;
top: 0;
height: 100vh;
width: 300px;
background-color: blue;
transition: all .3s ease;
transform: translate3d(-300px, 0, 0);
z-index: 10;
}
.menuActive {
transform: translate3d(0, 0, 0);
}
.page-container {
border: 4px solid;
height: 100%;
width: 100%;
min-height: 1200px;
background-color: #ccc;
transform: scale3d(1, 1, 1);
transition: all .4s ease;
}
.pc-active {
width: 90vw;
height: 90vh;
min-height: 90vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="off-canvas"></div>
<div class="page-container"></div>
I'm using a CSS hover effect that I found on Codrops in my web portfolio's work page. At mobile resolutions, the elements' animation is activated by clicking the hyperlinked image, but the transition doesn't always have time to complete before loading the next page.
Is there a way to utilize JavaScript/jQuery to delay the loading of a page/website at mobile resolutions?
Update:
I've combined Yaseen Ahmed's solution below with a jQuery-based StackOverflow solution that I finally ran across for a perfect solution to my problems.
$(document).ready(function() {
$('.delay').click(function(e) {
if (window.innerWidth < 768) {
e.preventDefault();
var $a = $(this).addClass('clicked');
setTimeout(function() {
window.location.assign($a.attr('href'));
}, 2500);
} else {
window.location.assign($a.attr('href'));
}
});
});
section {
width: 600px;
height: 400px;
}
figure {
cursor: pointer;
}
figure.apollo {
position: relative;
float: left;
overflow: hidden;
width: 100%;
background: #c3589e;
}
figure.apollo img {
position: relative;
display: block;
height: auto;
width: 100%;
opacity: 0.8;
}
figure.apollo figcaption {
padding: 2rem;
backface-visibility: hidden;
}
figure.apollo figcaption::before,
figure.apollo figcaption::after {
pointer-events: none;
}
figure.apollo figcaption,
figure.apollo figcaption>a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
max-width: none;
}
figure.apollo figcaption>a {
z-index: 5;
white-space: nowrap;
span {
opacity: 0;
}
}
figure.apollo img {
opacity: 0.95;
transition: opacity 0.35s, transform 0.35s;
transform: scale3d(1.1, 1.1, 1);
}
figure.apollo figcaption::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.5);
content: '';
transition: transform 0.6s;
transform: scale3d(2.2, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -100%, 0);
}
figure.apollo figcaption p span {
margin: .25rem 0;
padding: 0 .5rem;
display: inline-block;
background-color: #ffffff;
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
}
figure.apollo:hover img {
opacity: 0.6;
transform: scale3d(1, 1, 1);
}
figure.apollo:hover figcaption::before {
transform: scale3d(2.2, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 100%, 0);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<section>
<p>Make sure you shrink your viewport width to less than 768px before testing the link delay.</p>
<figure class="apollo">
<img src="https://www.tylerfuller.me/assets/images/sakura.jpg" alt="Cherry Blossoms" />
<figcaption>
<p><span>This is a link to the</span><br />
<span>pure CSS Sakura</span><br />
<span>theme / framework.</span></p>
<a class="delay" href="https://oxal.org/projects/sakura/"></a>
</figcaption>
</figure>
</section>
</body>
All you need to create the java script function in your project see in code.
your hyper link
java script function
function loadpage() {
if (window.innerWidth < 768) {
setTimeout(function(){
location.href="your_url";
}, 1000);
} else {
location.href="your_url";
}
}
What will this function do when your screen width is less then 768 it will load url after one second and if grater then it will load url without delay.
Note : When you resize the screen width must reload the page.