Cannot create scroll effect on JavaScript

Cannot create scroll effect on JavaScript - javascript

I want to create a look that allows when a user press the "Scroll" button, the page will scroll with sliding effect. But it does not work on my page. I tried add with tag to my html file but it does not work too.
I found a script for that but it did not work.
Where is my mistake?
home.html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="{% static 'js/home.js' %}"></script>
<link rel="stylesheet" href="{% static 'css/home.css' %}">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
.
.
.
<section id="section01" class="demo">
<h1> Welcome to PHARSYS </h1>
<h2>Scroll for Login or Signup</h2>
<span></span>
</section>
<section id="section02" class="demo">
<h1>Login</h1><br>
<h2>Press the button to log in to the system.
<br><br>
</h2>
<span></span>Scroll
</section>
<section id="section03" class="demo">
<h1>Signup</h1>
<h2>Press the button to register to the system</h2>
</section>
home.js
$(function() {
$('a[href*=#]').on('click', function(e) {
e.preventDefault();
$('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top}, 500, 'linear');
});
});
home.css
#import url(https://fonts.googleapis.com/css?family=Josefin+Sans:300,400);
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
section {
position: relative;
width: 100%;
height: 100%;
}
section::after {
position: absolute;
bottom: 0;
left: 0;
content: '';
width: 100%;
height: 80%;
background: -webkit-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,.8) 80%,rgba(0,0,0,.8) 100%);
background: linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,.8) 80%,rgba(0,0,0,.8) 100%);
}
section h1 {
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #fff;
font : normal 300 64px/1 'Josefin Sans', sans-serif;
text-align: center;
white-space: nowrap;
}
section h2 {
position: absolute;
top: 65%;
left: 50%;
z-index: 1;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #fff;
font : normal 200 24px/1 'Josefin Sans', sans-serif;
text-align: center;
white-space: nowrap;
}
#section01 { background: url(https://picsum.photos/1200/800?image=575) center center / cover no-repeat;}
#section02 { background: url(https://picsum.photos/1200/800?image=1016) center center / cover no-repeat;}
#section03 { background: url(https://picsum.photos/1200/800?image=869) center center / cover no-repeat;}
.demo a {
position: absolute;
bottom: 20px;
left: 50%;
z-index: 2;
display: inline-block;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
color: #fff;
font : normal 400 20px/1 'Josefin Sans', sans-serif;
letter-spacing: .1em;
text-decoration: none;
transition: opacity .3s;
}
.demo a:hover {
opacity: .5;
}
#section01 a {
padding-top: 60px;
}
#section01 a span {
position: absolute;
top: 0;
left: 50%;
width: 46px;
height: 46px;
margin-left: -23px;
border: 1px solid #fff;
border-radius: 100%;
box-sizing: border-box;
}
#section01 a span::after {
position: absolute;
top: 50%;
left: 50%;
content: '';
width: 16px;
height: 16px;
margin: -12px 0 0 -8px;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
box-sizing: border-box;
}
#section01 a span::before {
position: absolute;
top: 0;
left: 0;
z-index: -1;
content: '';
width: 44px;
height: 44px;
box-shadow: 0 0 0 0 rgba(255,255,255,.1);
border-radius: 100%;
opacity: 0;
-webkit-animation: sdb03 3s infinite;
animation: sdb03 3s infinite;
box-sizing: border-box;
}
#-webkit-keyframes sdb03 {
0% {
opacity: 0;
}
30% {
opacity: 1;
}
60% {
box-shadow: 0 0 0 60px rgba(255,255,255,.1);
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes sdb03 {
0% {
opacity: 0;
}
30% {
opacity: 1;
}
60% {
box-shadow: 0 0 0 60px rgba(255,255,255,.1);
opacity: 0;
}
100% {
opacity: 0;
}
}
#section02 a {
padding-top: 60px;
}
#section02 a span {
position: absolute;
top: 0;
left: 50%;
width: 46px;
height: 46px;
margin-left: -23px;
border: 1px solid #fff;
border-radius: 100%;
box-sizing: border-box;
}
#section02 a span::after {
position: absolute;
top: 50%;
left: 50%;
content: '';
width: 16px;
height: 16px;
margin: -12px 0 0 -8px;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
box-sizing: border-box;
}
#section03 a {
padding-top: 60px;
}
#section03 a span {
position: absolute;
top: 0;
left: 50%;
width: 46px;
height: 46px;
margin-left: -23px;
border: 1px solid #fff;
border-radius: 100%;
box-sizing: border-box;
}
#section03 a span::after {
position: absolute;
top: 50%;
left: 50%;
content: '';
width: 16px;
height: 16px;
margin: -12px 0 0 -8px;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
box-sizing: border-box;
}
#section03 a span::before {
position: absolute;
top: 0;
left: 0;
z-index: -1;
content: '';
width: 44px;
height: 44px;
box-shadow: 0 0 0 0 rgba(255,255,255,.1);
border-radius: 100%;
opacity: 0;
-webkit-animation: sdb03 3s infinite;
animation: sdb03 3s infinite;
box-sizing: border-box;
}
#-webkit-keyframes sdb03 {
0% {
opacity: 0;
}
30% {
opacity: 1;
}
60% {
box-shadow: 0 0 0 60px rgba(255,255,255,.1);
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes sdb03 {
0% {
opacity: 0;
}
30% {
opacity: 1;
}
60% {
box-shadow: 0 0 0 60px rgba(255,255,255,.1);
opacity: 0;
}
100% {
opacity: 0;
}
}

Your problem was here
$('a[href*=#]').on('click', function(e) { ...
To target the anchor elements that have a href attribute which begin with the # character you would use ^ (instead of *), which means starts with, and you would also add some parentheses around the search character like this
$('a[href^="#"]').on('click', function(e) { ...
Check below:
Note: I purposefully gave the body a height of 1000px so we can test and run here.
$(function() {
$('a[href*="#"]').on('click', function(e) {
e.preventDefault();
$('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top}, 500, 'linear');
});
});
body {
height: 1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="{% static 'js/home.js' %}"></script>
<link rel="stylesheet" href="{% static 'css/home.css' %}">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<section id="section01" class="demo">
<h1> Welcome to PHARSYS </h1>
<h2>Scroll for Login or Signup</h2>
<span></span>
</section>
<section id="section02" class="demo">
<h1>Login</h1><br>
<h2>Press the button to log in to the system.
<br><br>
</h2>
<span></span>Scroll
</section>
<section id="section03" class="demo">
<h1>Signup</h1>
<h2>Press the button to register to the system</h2>
</section>
You can also use the * as a wild card instead of ^, which will then match anchor elements that have a # character anywhere in their href attribute, and not just begin with #.

Related

How do I recreate the text animation on https://dekks.app

What I am trying to implement
I have tried implementing this with just CSS but what I have been able to achieve is not quite the same. I would include a gif of what I have currently but I'm not able to make it public. But if anything here is the codepen link to the approach I utilized and my edit of the code is included below (irrelevant things commented out and "filler text" is used as a placeholder for real text7). I'd be glad if anyone can help me. (To be noted that I'm using Tailwind for most of the styling and I'm only using custom CSS for the animation aspect).
HTML:
<div className="loading">
<div style={{ "--i": "1" }}>
<span className="text-blue-400 text-40 font-bold">
Filler Text
</span>
</div>
<div style={{ "--i": "3" }}>
<span className="text-blue-400 text-40 font-bold">
Filler Text
</span>
</div>
<div style={{ "--i": "5" }}>
<span className="text-blue-400 text-40 font-bold">
Filler Text
</span>
</div>
<div style={{ "--i": "7" }}>
<span className="text-blue-400 text-40 font-bold">
Filler Text
</span>
</div>
</div>
CSS:
.loading {
position: relative;
width: 50%;
height: 120.48px;
margin: 40px auto;
transform-style: preserve-3d;
}
.loading:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent;
/* box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3); */
}
.loading div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 12px;
display: inline-block;
background: transparent;
transform-style: preserve-3d;
perspective: 1000px;
transform-origin: 100% 400%;
overflow: hidden;
animation: animate 4s linear infinite;
animation-delay: calc(0.5s * var(--i));
margin-left: 20px;
}
#keyframes animate {
0% {
transform: perspective(500px) translate3d(0, 0, 0);
opacity: 0.5;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0);
}
25% {
transform: perspective(500px) translate3d(-10px, -20px, 20px);
opacity: 1;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
}
35%,
100% {
transform: perspective(500px) translate3d(-10px, -20px, -150px);
opacity: 0;
}
}
.loading div span {
position: absolute;
top: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
/**background: url("/src/components/assets/images/blue-text-gradient.png");
background-repeat: no-repeat;
background-size: cover;
background-position: center;**/
}
For reference to the live site for inspection here is the link: dekks.
Also, feel free to correct me as this is my first time asking a question here.

You should look at this example and modify you code accordingly.
<h1>
<span>always be</span>
<div class="message">
<div class="word1">close</div>
<div class="word2">code</div>
<div class="word3">creating</div>
</div>
</h1>
CSS
* {
box-sizing: border-box;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
width: 100vw;
}
h1 {
color: #333;
font-family: tahoma;
font-size: 3rem;
font-weight: 100;
line-height: 1.5;
text-transform: uppercase;
white-space: nowrap;
overflow: hidden;
position: relative;
width: 550px;
}
h1 span {
font-size: 40px;
margin-left: 40px;
}
.message {
background-color: yellow;
color: #333;
display: block;
font-weight: 900;
overflow: hidden;
position: absolute;
padding-left: 0.5rem;
top: 0.2rem;
left: 270px;
animation: openclose 5s ease-in-out infinite;
}
.word1, .word2, .word3 {
font-family: tahoma;
}
#keyframes openclose {
0% {
top: 0.2rem;
width: 0;
}
5% {
width: 0;
}
15% {
width: 230px;
}
30% {
top: 0.2rem;
width: 230px;
}
33% {
top: 0.2rem;
width: 0;
}
35% {
top: 0.2rem;
width: 0;
}
38% {
top: -4.5rem;
}
48% {
top: -4.5rem;
width: 190px;
}
62% {
top: -4.5rem;
width: 190px;
}
66% {
top: -4.5rem;
width: 0;
text-indent: 0;
}
71% {
top: -9rem;
width: 0;
text-indent: 5px;
}
86% {
top: -9rem;
width: 285px;
}
95% {
top: -9rem;
width: 285px;
}
98% {
top: -9rem;
width: 0;
text-indent: 5px;
}
100% {
top: 0;
width: 0;
text-indent: 0;
}
}

Create a popup container that distinguishes each button (so they don't all popup at once) [duplicate]

This question already has answers here:
jQuery $(this) keyword
(6 answers)
Closed 1 year ago.
I'm usually good with searching for my answer, but I can't seem to get this right. The setup I have for this pop-up is perfect (responsive, plays well with what's inside (shortcode) etc.) the problem I'm having is because I've retrofitted from a codepen, it's made for just 1 pop-up per page.
I'm trying to create a project gallery wherein they click an anchor and a container with a slider inside shows the project's work (it works perfectly, just for one popup) but with say potentially 15 project galleries (pop-ups) per page.
I'm a novice with regards to jQuery, so please be easy on me I am ALWAYS learning.
The HTML
jQuery(document).ready(function( $ ){
jQuery(document).ready(function($){
//open popup
$('.popup-trigger').on('click', function(event){
event.preventDefault();
$('.popup').addClass('is-visible');
});
//close popup
$('.popup').on('click', function(event){
if( $(event.target).is('.popup-close') || $(event.target).is('.popup') ) {
event.preventDefault();
$(this).removeClass('is-visible');
}
});
//close popup when clicking the esc keyboard button
$(document).keyup(function(event){
if(event.which=='27'){
$('.popup').removeClass('is-visible');
}
});
});
});
#media(max-width:1150px) {
.popup-container{
top: 25% !important;
width: 90% !important;
height: 50%;
padding: 2rem !important;
}
}
.page-id-474 main#content{
margin: 0px !important
}
.popup-trigger {
width: 170px;
right: 2rem;
margin: 3em auto;
text-align: center;
color: #FFF;
font-size: 18px;
padding:1rem 2rem;
text-decoration:none;
transition:300ms all;
}
.popup-trigger:hover {
opacity:.8;
}
.popup1 {
position: fixed;
left: 0;
top: 0;
height: 100%;
z-index: 1000;
width: 100%;
background-color: rgba(56, 56, 55, 0.9);
opacity: 0;
visibility: hidden;
transition:500ms all;
}
.popup1.is-visible {
opacity: 1;
visibility: visible;
transition:1s all;
}
.popup {
position: fixed;
left: 0;
top: 0;
height: 100%;
z-index: 1000;
width: 100%;
background-color: rgba(56, 56, 55, 0.9);
opacity: 0;
visibility: hidden;
transition:500ms all;
}
.popup.is-visible {
opacity: 1;
visibility: visible;
transition:1s all;
}
.popup-container {
transform:translateY(-50%);
transition:500ms all;
position: relative;
width: 60%;
margin: 2em auto;
top: 5%;
padding:5rem;
background: #FFF;
border-radius: .25em .25em .4em .4em;
text-align: center;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}
.is-visible .popup-container {
transform:translateY(0);
transition:500ms all;
}
.popup-container .popup-close {
position: absolute;
top: 8px;
font-size:0;
right: 8px;
width: 30px;
height: 30px;
}
.popup-container .popup-close::before,
.popup-container .popup-close::after {
content: '';
position: absolute;
top: 12px;
width: 14px;
height: 3px;
background-color: #8f9cb5;
}
.popup-container .popup-close::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
left: 8px;
}
.popup-container .popup-close::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
right: 8px;
}
.popup-container .popup-close:hover:before,
.popup-container .popup-close:hover:after {
background-color:#35a785;
transition:300ms all;
}
/*==========================================================================
Site grid
========================================================================== */
.grid-this {
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
padding: 30px;
}
.grid-this.with-spacing {
gap: 30px;
}
.grid-this .block img {
width: 100%;
height: auto;
vertical-align: top;
}
/* Grid spacing in slick slider */
.grid-this.with-spacing .slick-slide {
margin-right: 30px;
}
.grid-this.with-spacing .slick-list {
margin-right: -30px;
}
#media(max-width:1150px) {
.grid-this.with-spacing .slick-slide {
margin-right: 0;
}
.grid-this.with-spacing .slick-list {
margin-right: 0;
}
.page-id-324 .site-container{
padding-left: 8px !important;
padding-right: 8px !important;
}
}
/* -------------------------------------------------------------
/
/ Main Cat Container
/
/ -------------------------------------------------------------*/
.main-cat-container{
Padding: 0px;
background-color: #fff;
border-style: solid;
border-width: 3px;
border-color:#e9ecf2;
transition:all 1s ease !important;
}
.main-cat-container:hover{
box-shadow: 0px 10px 13px -4px rgba(0,0,0,0.3);
-webkit-box-shadow: 0px 10px 13px -4px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 10px 13px -4px rgba(0,0,0,0.3);
transition:all 1s ease !important;
}
.main-cat-title{
padding-top: 12px;
font-size:22px;
color:#38507b;
text-align: center;
}
.main-cat-container:hover i{
color:#0e1932;
}
.mc-icons{
text-align: center;
}
.mc-icons i{
font-size:45px;
}
.choice-p{
color:#343a40;
font-size:22px;
font-weight: bold;
}
.custom-hr-spacing{
margin-top: 45px !important;
margin-bottom: 45px !important;
}
.faux-btn-container{
text-align: center !important;
margin-top: 20px !important;
}
.faux-btn{
background-color:#4cb150;
padding: 15px 35px;
color: #FFF;
transition:all 1s ease !important;
border-radius: 8px;
}
.faux-btn:hover{
background-color:#59cf5d;
transition:all 1s ease !important;
}
<div class="grid-this with-spacing margins-fix">
<div>
<a href="#0" id="info" class="info popup-trigger" title="info">
<div style="padding-bottom: 50px;" class="main-cat-container">
<div class="mc-icons" data-aos="flip-left" data-aos-delay="50" aos-duration="500"><img src="https://gilbert.level10designdev.com/wp-content/uploads/2021/12/Gilbert-Design-Build-Before-After-Kitchen-Remodel-Bradenton-Florida.jpg" width=100% height=auto></div>
<h3 class="main-cat-title">vEITH</h3>
<div class="faux-btn-container"><span class="faux-btn">See Project</span></div>
</div>
</a>
<div class="popup" role="alert">
<div class="popup-container">
Close
[metaslider id="2409"]
</div>
</div>
</div>
<div><a href="#0" id="info" class="info popup-trigger" title="info">
<div style="padding-bottom: 50px;" class="main-cat-container">
<div class="mc-icons" data-aos="flip-left" data-aos-delay="50" aos-duration="500"><img src="https://gilbert.level10designdev.com/wp-content/uploads/2021/12/Gilbert-Design-Build-Before-After-Kitchen-Remodel-Bradenton-Florida.jpg" width=100% height=auto></div>
<h3 class="main-cat-title">vEITH</h3>
<div class="faux-btn-container"><span class="faux-btn">See Project</span></div>
</div>
</a>
<div class="popup" role="alert">
<div class="popup-container">
Close
[metaslider id="2409"]
</div>
</div>
</div>
<div>.</div>
</div>
I've also created a code pen to visually show you the issue:
https://codepen.io/John_Barbagallo/pen/dyVXOvV
Any help is much appreciated!

Your html code has a syntax error. The id attribute specifies a unique id for an HTML element. The value of the id attribute must be unique within the HTML document. See details
Why are you nesting these 2 pieces of code:
jQuery(document).ready(function( $ ){
jQuery(document).ready(function($){
})
})
I think you should remove the part of the code that is duplicated.
$('.popup').addClass('is-visible'); this code means that all html elements containing the class popup will be added an is-visible class. This is lead to your error.
You should Jquery traversing to find popup belong to project clicked
Change it like this:
$('.popup-trigger').on('click', function(event){
event.preventDefault();
$(this).parent().find('.popup').addClass('is-visible');
});
All code here:
$(document).ready(function(){
//open popup
$('.popup-trigger').on('click', function(event){
event.preventDefault();
$(this).parent().find('.popup').addClass('is-visible');
});
//close popup
$('.popup').on('click', function(event){
if( $(event.target).is('.popup-close') || $(event.target).is('.popup') ) {
event.preventDefault();
$(this).removeClass('is-visible');
}
});
//close popup when clicking the esc keyboard button
$(document).keyup(function(event){
if(event.which=='27'){
$('.popup').removeClass('is-visible');
}
});
});
#media(max-width:1150px) {
.popup-container{
top: 25% !important;
width: 90% !important;
height: 50%;
padding: 2rem !important;
}
}
.page-id-474 main#content{
margin: 0px !important
}
.popup-trigger {
width: 170px;
right: 2rem;
margin: 3em auto;
text-align: center;
color: #FFF;
font-size: 18px;
padding:1rem 2rem;
text-decoration:none;
transition:300ms all;
}
.popup-trigger:hover {
opacity:.8;
}
.popup1 {
position: fixed;
left: 0;
top: 0;
height: 100%;
z-index: 1000;
width: 100%;
background-color: rgba(56, 56, 55, 0.9);
opacity: 0;
visibility: hidden;
transition:500ms all;
}
.popup1.is-visible {
opacity: 1;
visibility: visible;
transition:1s all;
}
.popup {
position: fixed;
left: 0;
top: 0;
height: 100%;
z-index: 1000;
width: 100%;
background-color: rgba(56, 56, 55, 0.9);
opacity: 0;
visibility: hidden;
transition:500ms all;
}
.popup.is-visible {
opacity: 1;
visibility: visible;
transition:1s all;
}
.popup-container {
transform:translateY(-50%);
transition:500ms all;
position: relative;
width: 60%;
margin: 2em auto;
top: 5%;
padding:5rem;
background: #FFF;
border-radius: .25em .25em .4em .4em;
text-align: center;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}
.is-visible .popup-container {
transform:translateY(0);
transition:500ms all;
}
.popup-container .popup-close {
position: absolute;
top: 8px;
font-size:0;
right: 8px;
width: 30px;
height: 30px;
}
.popup-container .popup-close::before,
.popup-container .popup-close::after {
content: '';
position: absolute;
top: 12px;
width: 14px;
height: 3px;
background-color: #8f9cb5;
}
.popup-container .popup-close::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
left: 8px;
}
.popup-container .popup-close::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
right: 8px;
}
.popup-container .popup-close:hover:before,
.popup-container .popup-close:hover:after {
background-color:#35a785;
transition:300ms all;
}
/*==========================================================================
Site grid
========================================================================== */
.grid-this {
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
padding: 30px;
}
.grid-this.with-spacing {
gap: 30px;
}
.grid-this .block img {
width: 100%;
height: auto;
vertical-align: top;
}
/* Grid spacing in slick slider */
.grid-this.with-spacing .slick-slide {
margin-right: 30px;
}
.grid-this.with-spacing .slick-list {
margin-right: -30px;
}
#media(max-width:1150px) {
.grid-this.with-spacing .slick-slide {
margin-right: 0;
}
.grid-this.with-spacing .slick-list {
margin-right: 0;
}
.page-id-324 .site-container{
padding-left: 8px !important;
padding-right: 8px !important;
}
}
/* -------------------------------------------------------------
/
/ Main Cat Container
/
/ -------------------------------------------------------------*/
.main-cat-container{
Padding: 0px;
background-color: #fff;
border-style: solid;
border-width: 3px;
border-color:#e9ecf2;
transition:all 1s ease !important;
}
.main-cat-container:hover{
box-shadow: 0px 10px 13px -4px rgba(0,0,0,0.3);
-webkit-box-shadow: 0px 10px 13px -4px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 10px 13px -4px rgba(0,0,0,0.3);
transition:all 1s ease !important;
}
.main-cat-title{
padding-top: 12px;
font-size:22px;
color:#38507b;
text-align: center;
}
.main-cat-container:hover i{
color:#0e1932;
}
.mc-icons{
text-align: center;
}
.mc-icons i{
font-size:45px;
}
.choice-p{
color:#343a40;
font-size:22px;
font-weight: bold;
}
.custom-hr-spacing{
margin-top: 45px !important;
margin-bottom: 45px !important;
}
.faux-btn-container{
text-align: center !important;
margin-top: 20px !important;
}
.faux-btn{
background-color:#4cb150;
padding: 15px 35px;
color: #FFF;
transition:all 1s ease !important;
border-radius: 8px;
}
.faux-btn:hover{
background-color:#59cf5d;
transition:all 1s ease !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="grid-this with-spacing margins-fix">
<div>
<a href="#0" id="project01" class="info popup-trigger" title="info">
<div style="padding-bottom: 50px;" class="main-cat-container">
<div class="mc-icons" data-aos="flip-left" data-aos-delay="50" aos-duration="500"><img
src="https://gilbert.level10designdev.com/wp-content/uploads/2021/12/Gilbert-Design-Build-Before-After-Kitchen-Remodel-Bradenton-Florida.jpg"
width=100% height=auto></div>
<h3 class="main-cat-title">vEITH</h3>
<div class="faux-btn-container"><span class="faux-btn">See Project</span></div>
</div>
</a>
<div class="popup" role="alert">
<div class="popup-container">
Close
[project01]
</div>
</div>
</div>
<div>
<a href="#0" id="project02" class="info popup-trigger" title="info">
<div style="padding-bottom: 50px;" class="main-cat-container">
<div class="mc-icons" data-aos="flip-left" data-aos-delay="50" aos-duration="500"><img
src="https://gilbert.level10designdev.com/wp-content/uploads/2021/12/Gilbert-Design-Build-Before-After-Kitchen-Remodel-Bradenton-Florida.jpg"
width=100% height=auto></div>
<h3 class="main-cat-title">vEITH</h3>
<div class="faux-btn-container"><span class="faux-btn">See Project</span></div>
</div>
</a>
<div class="popup" role="alert">
<div class="popup-container">
Close
[project02]
</div>
</div>
</div>
<div>.</div>
</div>

Hi what you need is to get the clicker, then find the pop in the parent of the clicker see below:
//open popup
$('.popup-trigger').on('click', function(event){
event.preventDefault();
// Next line is what changed.
$(this).parent().find(".popup").addClass('is-visible');
});

how to make clock hands move/rotate (html, css)

i tried making an easy working clock but i have no idea how to get the clock hands to rotate. i tried to use "#keyframes" to try to get it working but i dont know what to put in "before". is there a way to make it rotate using only css or will using javascript be easier. the link below shows my work but you can also look below and see my code.
https://codepen.io/dior44/pen/GRZMZdy
h1 {
margin: -40px 0 0 0;
font-size: 50px;
position: relative;
top: 100px;
}
div {
margin: 0 auto;
}
.clock {
height: 400px;
width: 400px;
border-radius: 400px;
background: #cccc;
}
.dot {
height: 60px;
width: 60px;
border-radius: 60px;
background: #aaa;
position: relative;
top: 120px;
left: -27px;
z-index: -1;
}
.hours {
width: 7px;
height: 90px;
background: blue;
position: relative;
top: 100px;
}
.minutes {
width: 5px;
height: 170px;
background: black;
position: relative;
top: -50px;
}
.seconds {
width: 3px;
height: 220px;
background: red;
position: relative;
top: -10px;
animation-name: second;
animation-duration: 1s;
}
#keyframes second {
from {
}
}
h2 {
position: relative;
top: 45px;
left: 738px;
font-size: 35px;
margin: -20px 0 0 0;
}
h3 {
margin: -140px 0 0 0;
font-size: 35px;
position:relative;
top: 310px;
left: 920px;
}
h4 {
margin: 3px 0 0 0;
position: relative;
top: 268px;
left: 570px;
font-size: 35px;
}
h5 {
margin: 20px 0 0 0;
position: relative;
top: 400px;
left: 738px;
font-size: 35px;
}
<h1>Clock</h1>
<h2>12</h2>
<h3>3</h3>
<h4>9</h4>
<h5>6</h5>
<body>
<div class="clock">
<div class="hours">
<div class="minutes">
<div class="seconds">
<div class="dot">
<div class="12">
<div class="3">
<div class="6">
<div class="9">
</body>

Pure HTML/CSS second hand:
#clock_container {
position: absolute;
top: 20px;
left: 20px;
width: 150px;
height: 150px;
border-radius: 50%;
border: 2px solid black;
}
#seconds {
height: 50%;
width: 0px;
box-sizing: border-box;
border: 1px solid black;
top: 0%;
left: 50%;
position: absolute;
transform-origin: bottom;
/* of-course, would be 60s */
animation: secondsMotion 10s infinite linear;
}
#keyframes secondsMotion {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div id="clock_container">
<div id="seconds"></div>
</div>
If you wanted to start with the correct time - with a little JS early on:
var sec = new Date().getSeconds();
var sec_start = (sec/60) * 360 + 'deg';
var sec_end = (sec/60) * 360 + 360 + 'deg';
document.documentElement.style.setProperty("--sec-rot-start", sec_start);
document.documentElement.style.setProperty("--sec-rot-end", sec_end);
and then, in the keyframes:
#keyframes secondsMotion {
0% {
transform: rotate(var(--sec-rot-start));
}
100% {
transform: rotate(var(--sec-rot-end));
}
}

Smooth scroll to

what I'm trying to is by clicking a button it will scroll smoothly down to the next section, without changing the background image. Similar to this; http://www.dada-data.net/en/
I've been able to make a click event that scrolls to a new page, but can't seem to get the sections to scroll up on the same background.
Thanks in advance for any help!
HTML
<section id="section01" class="demo">
<div class="hero">
<img src="/Users/jbeez/desktop/portfolio/JMB_B.png" class="jmb">
</div>
<span></span>Click
</section>
<!-- end of section 1 -->
<section id="section02" class="demo">
<div>
<h1>Hello world</h1>
</div>
</section>
JAVASCRIPT
$(function() {
$('a[href*=#]').on('click', function(e) {
e.preventDefault();
$('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top}, 500, 'linear');
});
});
CSS
#section01 { background: url(/Users/jbeez/desktop/portfolio/background.png) center center / cover no-repeat;}
#section02 { background: url(/Users/jbeez/desktop/portfolio/background.png) center center / cover no-repeat;}
#section03 { background: url(/Users/jbeez/desktop/portfolio/background.png) center center / cover no-repeat;}
.demo a {
position: absolute;
bottom: 20px;
left: 50%;
z-index: 2;
display: inline-block;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
color: #fff;
font : normal 400 20px/1 'Josefin Sans', sans-serif;
letter-spacing: .1em;
text-decoration: none;
transition: opacity .3s;
}
.demo a:hover {
opacity: .5;
}
#section01 a {
padding-top: 60px;
}
#section01 a span {
position: absolute;
top: 0;
left: 50%;
width: 24px;
height: 24px;
margin-left: -12px;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
box-sizing: border-box;
}
#section02 a {
padding-top: 60px;
}
#section02 a span {
position: absolute;
top: 0;
left: 50%;
width: 46px;
height: 46px;
margin-left: -23px;
border: 1px solid #fff;
border-radius: 100%;
box-sizing: border-box;
}
#section02 a span::after {
position: absolute;
top: 50%;
left: 50%;
content: '';
width: 16px;
height: 16px;
margin: -12px 0 0 -8px;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
box-sizing: border-box;
}

Like the others are saying... The # is terribly missing.
<span></span>Click
Then, in the attribute selector you used, there is some quotes missing around this # you're trying to target.
$("a[href*='#']")
CodePen of the code fixed.

Try to change your href,
like this :
<span></span>Click
$(".your element").click(function() {
$('html, body').animate({
scrollTop: $(this).attr("href").offset().top
}, 2000);
});

Try this with a hash:
<span></span>Click

External custom prev next button fancybox

In my example when I click on thumbnails I open a fancybox gallery, to see prev and next photo I need to click on photos. How can I have the same effect with my "prev and next" link at left ?
At this time nothing happened when I click on them ?
HERE IS MY LINK
http://www.booclin.ovh/tom/254/
$("img").error(function() { $(this).parent().remove(); });
$("a.fancyboxgallery").fancybox();
$("#launcherbook2").on("click", function(){
$("a.fancyboxgallery").eq(0).trigger("click");
});
$(".fancybox-lock").bind("mousewheel", function() { return false; });
$( function( ){
$( "#closegallery" ).on( "click", function(){
$.fancybox.close(); return false; });
});
*, *:after, *:before { padding: 0; margin: 0; -webkit-touch-callout: none;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; outline:0; box-sizing: border-box }
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
html, body { height: 100%; padding: 0; margin: 0; background-color: #fff;}
body, p, span, a, .links, .linkscredit { margin: 0 auto; font-size: 11px; line-height: 20px; text-decoration:none; font-family: "open_sansregular", sans-serif; letter-spacing: 1px; text-align:left; color: #282828; background-color: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; z-index:9999; }
.spanbold { font-family: "open_sansbold"; }
.boldlinks, .menustyle2 { font-family: "open_sansbold"; cursor:pointer;}
a:hover { color: #d2c6af; }
img, object, embed { border: 0px; }
/* Second page */
.rightpart { position: fixed; left:0px; width: 100%; height: 100%; padding-left:200px; z-index: 0; overflow: auto;}
.leftpart { text-align:left; position: absolute; left:0; top:0; height:100%; padding: 80px 40px 10px 40px; overflow: hidden; z-index: 8021; }
.partmenu { z-index: 8021; }
.bottominfo { padding-left:0px; position:absolute; bottom:10px;
right:20px; z-index: 0; }
.secondleftpart { position:absolute; top:30px; left:10px; }
/* Second page */
#media only screen and (max-height: 500px) {
.bottominfo { display: none; }
.leftpart { height:auto; }
}
#page-tablegalerie { overflow:hidden; height: 100%; width: 100%; border-collapse: collapse; text-align: left; }
#page-tdgalerie { height: 100%; padding-left:0px; vertical-align: middle; }
div#globalgalerie { max-width: 100%; text-align: left; }
.fancyboxgallery, .socialopacity {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
z-index:1;
transition: opacity .1s ease-in-out;
-moz-transition: opacity .1s ease-in-out;
-webkit-transition: opacity .1s ease-in-out;
font-size: 0px;
}
.fancyboxgallery:hover, .socialopacity:hover {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
z-index:1;
}
.fancyboxthumbnailsgallery { margin: 12px 5px -10px 5px; }
div#juicebox-container{ height:900px; width:100%; overflow: hidden; }
.imglist { overflow: hidden; }
.imglist a { float: left; margin: 0px; }
.imglist a img {
vertical-align:bottom;
padding: 0px;
border: 0px solid #ccc;
max-width: 200px;
max-height: 133px;
float: left;
}
#page_holder {height: 100%;width: 100%;}
/* Slide */
#fancybox-loading,
#fancybox-lock,
.fancybox-wrap,
.fancybox-skin,
.fancybox-inner,
.fancybox-error,
.fancybox-image,
.fancybox-wrap iframe,
.fancybox-wrap object,
.fancybox-wrap embed,
a.fancybox-close,
a.fancybox-expand,
a.fancybox-nav,
a.fancybox-nav span,
.fancybox-tmp
{
padding: 0;
margin: 0;
border: 0;
outline: none;
vertical-align: top;
background-color: transparent;
background-repeat: no-repeat;
background-image: none;
text-shadow: none;
}
#fancybox-lock {
background:#fff;
position: fixed;
top: 0;
left: 0px;
right: 0;
bottom: 0;
z-index: 8020;
overflow: hidden!important;
-webkit-transition : -webkit-transform 0.5s;
-webkit-transform : translateX(0px);
}
.fancybox-lock-test {
overflow-y: hidden !important;
}
.fancybox-lock {
overflow: hidden !important;
width: auto;
}
.fancybox-lock body {
overflow: hidden !important;
}
.fancybox-wrap {
position: absolute;
top: 0;
left: 0;
z-index: 8020;
-webkit-transform: translate3d(0,0,0);
}
.fancybox-opened {
z-index: 8030;
}
.fancybox-skin {
border:0px;
background: #fff;
}
.fancybox-inner {
position: relative;
overflow: hidden!important;
-webkit-overflow-scrolling: touch;
width: auto!important;
height: auto!important;
padding: 0px 30px -10px 0px !important;
}
.fancybox-spacer {
position: absolute;
top: 100%;
left: 0;
width: 1px;
}
.fancybox-image, .fancybox-iframe {
display: block;
width: 100%;
}
.fancybox-image {
max-width: 100%;
max-height: 100%;
zoom: 1;
}
a.fancybox-close {
position: fixed !important;
top: 80px;
left: 40px;
z-index: 99999 !important;
cursor: pointer;
background-position: 0 0;
}
a.fancybox-close:hover { color:#d2c6af; text-shadow: 0px 0px 0px #282828;}
a.fancybox-nav {
position: absolute;
top: 0;
width: 50%;
height: 100%;
cursor: pointer;
text-decoration: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
z-index: 8040;
overflow: hidden;
}
.fancybox-type-iframe a.fancybox-nav,
.fancybox-type-inline a.fancybox-nav,
.fancybox-type-html a.fancybox-nav
{
width: 70px;
}
a.fancybox-prev {
left: 0px;
}
a.fancybox-next {
right: 0px;
}
a.fancybox-nav span {
position: absolute;
top: 50%;
width: 46px;
height: 46px;
margin-top: -23px;
cursor: pointer;
z-index: 8040;
}
a.fancybox-prev span {
left: 0;
background-position: 0 -50px;
}
a.fancybox-next span {
right: 0;
background-position: 0 -100px;
}
.fancybox-mobile a.fancybox-nav {
max-width: 80px;
}
.fancybox-desktop a.fancybox-nav {
opacity: 1; filter: alpha(opacity=100);
}
.fancybox-desktop a.fancybox-nav:hover {
opacity: 1; filter: alpha(opacity=100);
}
a.fancybox-expand {
position: absolute;
bottom: 0;
right: 0;
width: 46px;
height: 46px;
z-index: 8050;
opacity: 0; filter: alpha(opacity=0);
background-position: 0 -150px;
zoom: 1;
-webkit-transition: opacity .1s ease;
-moz-transition: opacity .1s ease;
-o-transition: opacity .1s ease;
transition: opacity .1s ease;
}
.fancybox-wrap:hover a.fancybox-expand {
opacity: 1; filter: alpha(opacity=100);
}
.fancybox-wrap a.fancybox-expand:hover {
opacity: 1; filter: alpha(opacity=100);
}
#fancybox-loading {
position: fixed;
top: 50%;
left: 50%;
margin-top: -85px;
margin-left: -35px;
width: 169px;
height: 71px;
padding:427px 348px;
background-color: #fff;
background-image: url(../images/loaderwhitescreen.gif);
background-position: center center;
opacity: 1; filter: alpha(opacity=100);
cursor: pointer;
z-index: 8060;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
.fancybox-tmp {
position: absolute !important;
top: -99999px;
left: -99999px;
max-width: 99999px;
max-height: 99999px;
overflow: visible !important;
}
.fancybox-title {
text-align:left;
line-height: 15px;
position: relative;
text-shadow: none;
z-index: 8050;
display: block;
visibility: hidden;
}
.fancybox-title-float-wrap {
position: relative;
margin-top: 10px;
text-align: left;
zoom: 1;
left: -9999px;
}
.fancybox-title-float-wrap > div {
display: inline-block;
padding: 7px 20px;
font-weight: bold;
text-shadow: 0 1px 2px #222;
background: transparent; background: rgba(255, 255, 255, 1);
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
.fancybox-title-outside-wrap {
position: relative;
margin-top: 10px;
text-shadow: 0 1px rgba(255, 255, 255, 1);
}
.fancybox-title-inside-wrap {
padding-top: 10px;
}
.fancybox-title-over-wrap {
position: absolute;
bottom: 0;
left: 0;
background: #fff; background: rgba(255, 255, 255, 1);
max-height: 50%;
overflow: auto;
}
.fancybox-overlay {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
z-index: 8010;
}
.fancybox-overlay-fixed {
position: fixed;
width: 100%;
height: 100%;
}
/* Default theme */
.fancybox-default-skin {
border-color: #fff;
background: #fff;
}
.fancybox-default-skin-open {
box-shadow: 0 10px 25px rgba(255, 255, 255, 1);
}
.fancybox-default-overlay {
background: #fff;
opacity: 1; filter: alpha(opacity=100);
}
}
.fancybox-dark-skin {
background: #fff;
border-color: #fff;
border-radius: 0px;
box-shadow: 0 0 10px rgba(255, 255, 255, 1) inset !important;
}
.fancybox-dark-overlay {
background: #fff;
opacity: 1; filter: alpha(opacity=100);
}
.fancybox-light-skin-open {
box-shadow: 0 10px 25px rgba(255, 255, 255, 1);
}
.fancybox-light-overlay {
opacity: 1; filter: alpha(opacity=100);
background: #fff; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #999999 0%, #555555 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#999999), color-stop(100%,#555555)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, #999999 0%,#555555 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, #999999 0%,#555555 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, #999999 0%,#555555 100%); /* IE10+ */
background: radial-gradient(ellipse at center, #999999 0%,#555555 100%); /* W3C */
}
<script src="http://www.booclin.ovh/tom/2/index/js/modernizr.custom.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="http://www.booclin.ovh/tom/254/index/normal/jquery.fancybox.js"></script>
<script type="text/javascript" src="http://www.booclin.ovh/tom/254/index/normal/fancybox.js"></script>
<div class="leftpart">
<div class="secondleftpart">
<a title="Prev" style="font-size: 7px; vertical-align: bottom; height: auto; width:15px; position: relative" class="fancybox-nav fancybox-next" href="javascript:;">PREV</a>
<a style="font-size: 7px;" href="javascript:;"> | </a>
<a title="Next" style="font-size: 7px; vertical-align: bottom; height: auto; width:15px; position: relative" class="fancybox-nav fancybox-prev" href="javascript:;">NEXT</a>
<br/>
<a style="font-size: 7px;" title="Thumbnails" id="closegallery" class="showthumbnails" href="javascript:;">
THUMBNAILS
</a>
</div>
</div>
<div class="rightpart"><div id="globalgalerie">
<a class="fancyboxgallery" rel="single_2" href="http://www.booclin.ovh/tom/254/index/projets/3.jpg" class="highlightit" title="">
<img style="margin:12px 5px 5px 5px;" alt="" src="http://www.booclin.ovh/tom/254/index/projets/03.jpg"/>
</a>
<a class="fancyboxgallery" rel="single_2" href="http://www.booclin.ovh/tom/254/index/projets/2.jpg" class="highlightit" title="">
<img alt="" style="margin:12px 5px 5px 5px;" src="http://www.booclin.ovh/tom/254/index/projets/02.jpg" />
</a>
<a class="fancyboxgallery" rel="single_2" href="http://www.booclin.ovh/tom/254/index/projets/1.jpg" class="highlightit" title="">
<img alt="" style="margin:12px 5px 5px 5px;" src="http://www.booclin.ovh/tom/254/index/projets/01.jpg"/>
</a>
</div></div>

Currently, your "PREV" and "NEXT" links aren't doing anything (due to you setting their reference to href="javascript:;"). You need to change this to:
<a title="Prev" style="font-size: 7px; vertical-align: bottom; height: auto; width:15px; position: relative" class="fancybox-nav fancybox-next" href="javascript:$.fancybox.prev();">PREV</a>
<a title="Next" style="font-size: 7px; vertical-align: bottom; height: auto; width:15px; position: relative" class="fancybox-nav fancybox-prev" href="javascript:$.fancybox.next();">NEXT</a>

Develop Reference

JavaScript is the programming language of the Web.

Cannot create scroll effect on JavaScript - javascript

Related

How do I recreate the text animation on https://dekks.app

Create a popup container that distinguishes each button (so they don't all popup at once) [duplicate]

how to make clock hands move/rotate (html, css)

Smooth scroll to

External custom prev next button fancybox

Categories

Resources