Currently struggling to add the .is-active class to my header via javascript. If you add "is-active" to the header classes it works well. But I can't seem to work it out in javascript.
I just want the class to be added as soon as you start scrolling, and then removed when returning to the top.
Appreciate all the help!
HTML:
<header class="header">
<div class="header-nav flex container">
<figure class="header-logo">
<a href="#">
<img class="header-logo-light" src="images/logoWhite.png" alt="San Miguel Services Logo">
<img class="header-logo-dark" src="images/logoDark.png" alt="San Miguel Services Logo">
</a>
</figure>
<nav class="header-menu flex">
<div class="header-menu-li">
WELCOME
SERVICES
ABOUT
PORTFOLIO
CONTACT
</div>
</nav>
<div class="header-btn">
<button href="#" class="button header-btn">REQUEST A QUOTE</button>
</div>
</div>
</header>
CSS:
.header {
position: fixed;
z-index: 1;
width: 100vw;
line-height: 18px;
}
.header .header-logo-dark {
opacity: 0;
display: none;
}
.header .header-logo-light {
opacity: 1;
display: block;
}
.header.is-active .header-logo-dark {
opacity: 1;
display: block;
}
.header.is-active .header-logo-light {
opacity: 0;
display: none;
}
.header.is-active .header-menu-li a {
color: $darkBlue;
&::before {
background: linear-gradient(to right, $mediumGreen, $lightGreen);
}
}
.header.is-active .header-btn button {
background: $mediumGreen;
color: $white;
transition: 300ms ease-in-out;
&:hover {
box-shadow: inset 0 0 0 2px $darkBlue;
color: $darkBlue;
background: transparent;
}
}
.header.is-active {
background: $white;
}
.header-nav {
padding: 20px 5.5%;
position: relative;
justify-content: space-between;
margin: auto;
}
.header-logo {
position: relative;
a img {
height: 46px;
}
}
.header-menu {
align-items: center;
}
.header-menu-li {
a {
position: relative;
margin: 0 0.625rem;
font-weight: 500;
font-size: $font-sm;
color: $white;
transition: color 300ms ease-in-out;
&::before {
content: "";
display: block;
position: absolute;
height: 5px;
background: $white;
left: 0;
right: 0;
bottom: -33px;
opacity: 0;
transition: opacity 300ms ease-in-out;
}
&:hover {
opacity: 0.95;
&::before {
opacity: 1;
}
}
}
}
.header-btn {
height: 46px;
font-size: $font-sm;
font-weight: 500;
button {
background: transparent;
border: 1px solid $white;
transition: 200ms ease-in-out;
&:hover {
background: $white;
color: $darkBlue;
}
}
}
Try this code:
window.addEventListener("scroll", function(){
var header = document.querySelector(".header");
header.classList.toggle("is-active", window.scrollY > 0);
})
Try to use more semantic HTML, this will help you in building the site.
<div class="menu">
<ul>
<li>Home</li>
</ul>
</div>
<section id="home">
<div class="wrapper">
</div>
</section>
You can also add some initial CSS settings to help you build your site, like :root, * {}, etc...
If you still don't know what a :root is, look it up, this will make it a lot easier.
I left some example code.
/* GENERAL */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
:root {
font-size: 62.5%; /* 1rem = 10px */
}
html {
scroll-behavior: smooth;
}
html,
body {
width: 100%;
height: 100%;
}
body {
font-family: " ";
font-size: 1.6rem;
text-align: center;
overflow: overlay;
background-color: var(--name-var);
}
.wrapper {
width: min(50rem, 100%);
margin-inline: auto;
padding-inline: 2.4rem;
}
window.addEventListener('scroll', onScroll)
onScroll()
function onScroll() {
showNavOnScroll ();
showBackToTopButtonOnScroll();
activateMenuAtCurrentSection(home);
}
function activateMenuAtCurrentSection(section) {
const targetLine = scrollY + innerHeight / 2
// check if the section has passed the line
// what data will I need?
const sectionTop = section.offsetTop
const sectionHeight = section.offsetHeight
const sectionTopReachOrPassedTargetLine = targetLine >= sectionTop
// check if the base is below the target line
// what data will I need?
const sectionEndAst = sectionTop + sectionHeight
const sectionEndPassedTargetLine = sectionEndAst <= targetLine
console.log('Did the session bottom go over the line?', sectionEndPassedTargetLine)
// section boundaries
const sectionBoundaries =
sectionTopReachOrPassedTargetLine && !sectionEndPassedTargetLine
const sectionId = section.getAttribute('id')
const menuElement = document.querySelector(`.menu a[href*=${sectionId}]`)
menuElement.classList.remove('active')
if (sectionBoundaries) {
menuElement.classList.add('active')
}
}
// This is so that when you scroll down your navigation bar goes out
function showNavOnScroll() {
if (scrollY > 0) {
navigation.classList.add('scroll');
} else {
navigation.classList.remove('scroll');
}
}
// Will make them appear smooth
ScrollReveal({
origin:'top',
distance: '30px',
duration: 700,
}).reveal(`
#home`);
Related
As part of the creation of an overlay, I got a code that is close to what I want to do, on codepen.
This one displays a parallax of text on a background.
But on the CodePen project, the motion animation is done on a mouseover event.
I would like to make this animation happen automatically, over a period of ten seconds, without having to call a mouseover.
Here is the code in question
const position = document.documentElement;
position.addEventListener("mousemove", (e) => {
position.style.setProperty("--x", e.clientX + "px");
});
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "poppins";
font-weight: 900;
}
a {
text-decoration: none;
}
section {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
background: #111;
}
.text {
position: relative;
transform: skewY(350deg) translateY(-200px);
animation: animatecolor 5s linear infinite;
}
#keyframes animatecolor {
0% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
}
}
.text h2 {
position: relative;
width: 100%;
font-size: 8em;
color: #fff;
pointer-events: none;
line-height: 1em;
white-space: nowrap;
text-shadow: calc(var(--x)) 100px 0 rgba(255, 255, 255, 0.1);
transform: translateX(calc(0% - var(--x) * var(--i)));
}
.text h2 span {
color: #0f0;
margin: 0 10px;
}
.text h2 span:nth-child(even) {
color: transparent;
-webkit-text-stroke: 2px #fff;
}
<section>
<div class="text">
<a href="https://wgraphiste.com" target="blank">
<h2 style="--i:0.5"><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span></h2>
<h2 style="--i:1.5"><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span></h2>
<h2 style="--i:2.5"><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span></h2>
<h2 style="--i:2.25"><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span></h2>
<h2 style="--i:1.25"><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span></h2>
<h2 style="--i:0.25"><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span></h2>
<h2 style="--i:3"><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span></h2>
<h2 style="--i:1.25"><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span></h2>
<h2 style="--i:1.75"><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span></h2>
</a>
</div>
</section>
Thank you in advance for your ideas! :)
It can be changed to run automatically with the requestAnimationFrame like this:
const position = document.documentElement;
let time = Date.now(), x = 0;
const move = () => {
if (Date.now() - time > 10000)
return;
position.style.setProperty("--x", (x++) + "px");
requestAnimationFrame(move);
};
move();
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "poppins";
font-weight: 900;
}
a {
text-decoration: none;
}
section {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
background: #111;
}
.text {
position: relative;
transform: skewY(350deg) translateY(-200px);
animation: animatecolor 5s linear infinite;
}
#keyframes animatecolor {
0% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
}
}
.text h2 {
position: relative;
width: 100%;
font-size: 8em;
color: #fff;
pointer-events: none;
line-height: 1em;
white-space: nowrap;
text-shadow: calc(var(--x)) 100px 0 rgba(255, 255, 255, 0.1);
transform: translateX(calc(0% - var(--x) * var(--i)));
}
.text h2 span {
color: #0f0;
margin: 0 10px;
}
.text h2 span:nth-child(even) {
color: transparent;
-webkit-text-stroke: 2px #fff;
}
<section>
<div class="text">
<a href="https://wgraphiste.com" target="blank">
<h2 style="--i:0.5"><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span></h2>
<h2 style="--i:1.5"><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span></h2>
<h2 style="--i:2.5"><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span></h2>
<h2 style="--i:2.25"><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span></h2>
<h2 style="--i:1.25"><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span></h2>
<h2 style="--i:0.25"><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span></h2>
<h2 style="--i:3"><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span></h2>
<h2 style="--i:1.25"><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span></h2>
<h2 style="--i:1.75"><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span><span>WGRAPHISTE.COM</span></h2>
</a>
</div>
</section>
My (epic) navbar gets messed up when the window is to small, how can I have it shrink proportionally to the page? I've tried a few things but it just shrinks the text size, but the text still ends up longer than the width of the window, with the title in the top left overlapping onto the text.
Here is the html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
<header id="nav-wrapper">
<nav id="nav">
<div class="nav left">
<span class="gradient skew">
<h1 class="logo un-skew">RiseUpOnario.ca</h1>
</span>
<button id="menu" class="btn-nav"><span class="fas fa-bars"></span></button>
</div>
<div class="nav right">
<span class="nav-link-span"><span class="u-nav">Home</span></span>
<span class="nav-link-span"><span class="u-nav">Blog</span></span>
<span class="nav-link-span"><span class="u-nav">Join</span></span>
<span class="nav-link-span"><span class="u-nav">Donate</span></span>
<span class="nav-link-span"><span class="u-nav">MPP Finder</span></span>
<span class="nav-link-span"><span class="u-nav">About Us</span></span>
<span class="nav-link-span"><span class="u-nav">Contact</span></span>
</div>
</nav>
</header>
<main>
<section id="home">
</section>
<section id="blog">
</section>
<section id="join">
</section>
<section id="donate">
</section>
<section id="mppfinder">
</section>
<section id="aboutus">
</section>
<section id="contact">
</section>
</main>
</body>
</html>
<style>
/*-------------Reset-------------*/
button {
background: none;
box-shadow: none;
border: none;
cursor: pointer;
}
button:focus,
input:focus {
outline: 0;
}
html {
scroll-behavior: smooth;
}
/*-------------Layout-------------*/
body {
line-height: 1.5em;
padding: 0;
margin: 0;
}
section {
height: 100vh;
}
#home {
background-color: #ddd;
}
#blog {
background-color: #aaa;
}
#join {
background-color: #888;
}
#donate {
background-color: #666;
}
#mppfinder {
background-color: #ddd;
}
#aboutus {
background-color: #aaa;
}
#contact {
background-color: #666;
}
/*-------------Helpers-------------*/
.skew {
transform: skew(-20deg);
}
.un-skew {
transform: skew(20deg);
}
/*-------------Nav-------------*/
#nav-wrapper {
overflow: hidden;
width: 100%;
margin: 0 auto;
position: fixed;
top: 0;
left: 0;
z-index: 100;
}
#nav {
background-color: #fff;
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
font-family: "Saira Semi Condensed", sans-serif;
height: 4em;
overflow: hidden;
}
#nav.nav-visible {
height: 100%;
overflow: auto;
}
.nav {
display: flex;
height: 4em;
line-height: 4em;
flex-grow: 1;
}
.nav-link,
.logo {
padding: 0 1em;
}
span.gradient {
background: #e9b1a7;
background: -webkit-linear-gradient(45deg, #e9b1a7, #cf0a0a);
background: linear-gradient(45deg, #e9b1a7, #cf0a0a);
padding: 0 1em;
position: relative;
right: 1em;
margin-right: auto;
}
span.gradient:hover {
animation-name: logo-hover;
animation-duration: 0.3s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.17, 0.57, 0.31, 0.85);
}
h1.logo {
font-weight: 300;
font-size: 1.75em;
line-height: 0.75em;
color: #fff;
}
h1.logo a, a:active, a:hover, a:visited {
text-decoration: none;
color: #fff;
}
.nav-link {
text-transform: uppercase;
text-align: center;
border-top: 0.5px solid #ddd;
}
a:link, a:visited, a:active {
text-decoration: none;
color: #e9b1a7;
}
a:hover {
text-decoration: underline;
}
.right {
display: flex;
flex-direction: column;
height: 100%;
}
.btn-nav {
color: #e9b1a7;
padding-left: 2em;
padding-right: 2em;
}
#media (min-width: 800px) {
#nav-wrapper {
overflow: hidden;
}
#nav {
overflow: hidden;
flex-direction: row;
}
.nav-link {
border-top: none;
}
.right {
overflow: hidden;
flex-direction: row;
justify-content: flex-end;
position: relative;
left: 1.5em;
height: auto;
}
.btn-nav {
display: none;
}
.nav a:link.active, a:visited.active, a:active.active {
background: #e9b1a7;
background: -webkit-linear-gradient(45deg, #e9b1a7, #cf0a0a);
background: linear-gradient(45deg, #e9b1a7, #cf0a0a);
color: #fff;
}
.nav-link-span {
transform: skew(20deg);
display: inline-block;
}
.nav-link {
transform: skew(-20deg);
color: #777;
text-decoration: none;
}
.nav-link:last-child {
padding-right: 3em;
}
a:hover.nav-link:not(.active) {
color: #444;
background: #ddd;
background: linear-gradient(45deg, #fff, #ddd);
}
}
#keyframes logo-hover {
20% {
padding-right: 0em;
}
100% {
padding-right: 5em;
}
}
</style>
<script>
var util = {
mobileMenu() {
$("#nav").toggleClass("nav-visible");
},
windowResize() {
if ($(window).width() > 800) {
$("#nav").removeClass("nav-visible");
}
},
scrollEvent() {
var scrollPosition = $(document).scrollTop();
$.each(util.scrollMenuIds, function (i) {
var link = util.scrollMenuIds[i],
container = $(link).attr("href"),
containerOffset = $(container).offset().top,
containerHeight = $(container).outerHeight(),
containerBottom = containerOffset + containerHeight;
if (
scrollPosition < containerBottom - 20 &&
scrollPosition >= containerOffset - 20
) {
$(link).addClass("active");
} else {
$(link).removeClass("active");
}
});
}
};
$(document).ready(function () {
util.scrollMenuIds = $("a.nav-link[href]");
$("#menu").click(util.mobileMenu);
$(window).resize(util.windowResize);
$(document).scroll(util.scrollEvent);
});
</script>
Try implementing % in your stylesheet for fonts and divs!
For example, if you want a line of text or a container within a container to adjust in size when the parent container shrinks, you can have your interior elements set to something like
elementName{ max-width: 75%}
See if that helps with some of the elements inside the navWrapper.
Set the navbar's height to 10vh or less/more. ##vh = ##% of display height. There is also 100vw. = ##% of display width.
I have created a simple image carousel that I am using on my site.
It all works well until I only have one but as soon as I try to create a new one it doesn't work properly.
All I need is that all the image sliders I create are independent of each other.
Both of the sliders should work individually.
Any help would be very great.
Here is my code:
//current position
var pos = 0;
//number of slides
var totalSlides = $('.slider-wrap ul li').length;
//get the slide width
var sliderWidth = $('.slider-wrap').width();
$(document).ready(function(){
/*****************
BUILD THE SLIDER
*****************/
//set width to be 'x' times the number of slides
$('.slider-wrap ul.slider').width(sliderWidth*totalSlides);
//next slide
$('.next').click(function(){
slideRight();
});
//previous slide
$('.previous').click(function(){
slideLeft();
});
/*************************
//*> OPTIONAL SETTINGS
************************/
//automatic slider
var autoSlider = setInterval(slideRight, 3000);
//for each slide
$.each($('.slider-wrap ul li'), function() {
//set its color
var c = $(this).attr("data-color");
$(this).css("background",c);
//create a pagination
var li = document.createElement('li');
$('.pagination-wrap ul').append(li);
});
//counter
countSlides();
//pagination
pagination();
//hide/show controls/btns when hover
//pause automatic slide when hover
$('.slider-wrap').hover(
function(){ $(this).addClass('active'); clearInterval(autoSlider); },
function(){ $(this).removeClass('active'); autoSlider = setInterval(slideRight, 3000); }
);
});//DOCUMENT READY
/***********
SLIDE LEFT
************/
function slideLeft(){
pos--;
if(pos==-1){ pos = totalSlides-1; }
$('.slider-wrap ul.slider').css('left', -(sliderWidth*pos));
//*> optional
countSlides();
pagination();
}
/************
SLIDE RIGHT
*************/
function slideRight(){
pos++;
if(pos==totalSlides){ pos = 0; }
$('.slider-wrap ul.slider').css('left', -(sliderWidth*pos));
//*> optional
countSlides();
pagination();
}
/************************
//*> OPTIONAL SETTINGS
************************/
function countSlides(){
$('.counter').html(pos+1 + ' / ' + totalSlides);
}
function pagination(){
$('.pagination-wrap ul li').removeClass('active');
$('.pagination-wrap ul li:eq('+pos+')').addClass('active');
}
/*GLOBALS*/
* {
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
color: #666;
}
a:hover {
color: #1bc1a3;
}
body,
hmtl {
background: #ecf0f1;
font-family: 'Anton', sans-serif;
}
.wrapper {
width: 600px;
margin: 50px auto;
height: 400px;
position: relative;
color: #fff;
text-shadow: rgba(0, 0, 0, 0.1) 2px 2px 0px;
}
.slider-wrap {
width: 600px;
height: 400px;
position: relative;
overflow: hidden;
}
.slider-wrap ul.slider {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.slider-wrap ul.slider li {
float: left;
position: relative;
width: 600px;
height: 400px;
}
.slider-wrap ul.slider li > div {
position: absolute;
top: 20px;
left: 35px;
}
.slider-wrap ul.slider li > div h3 {
font-size: 36px;
text-transform: uppercase;
}
.slider-wrap ul.slider li > div span {
font-family: Neucha, Arial, sans serif;
font-size: 21px;
}
.slider-wrap ul.slider li i {
text-align: center;
line-height: 400px;
display: block;
width: 100%;
font-size: 90px;
}
.object-fit_contain {
object-fit: contain;
height: auto;
max-width: 600px;
}
/*btns*/
.btns {
position: absolute;
width: 50px;
height: 60px;
top: 50%;
margin-top: -25px;
line-height: 57px;
text-align: center;
cursor: pointer;
z-index: 100;
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-ms-user-select: none;
-webkit-transition: all 0.1s ease;
-moz-transition: all 0.1s ease;
-o-transition: all 0.1s ease;
-ms-transition: all 0.1s ease;
transition: all 0.1s ease;
}
.next {
right: -1px;
margin-right: 200px;
}
.previous {
left: -1px;
margin-left: 200px;
}
.counter {}
.slider-wrap.active .next {
right: 0px;
}
.slider-wrap.active .previous {
left: 0px;
}
/*bar*/
.pagination-wrap {
min-width: 20px;
margin-top: 350px;
margin-left: auto;
margin-right: auto;
height: 15px;
position: relative;
text-align: center;
}
.pagination-wrap ul {
width: 100%;
}
.pagination-wrap ul li {
margin: 0 4px;
display: inline-block;
width: 5px;
height: 5px;
border-radius: 50%;
background: #3ab8cb;
opacity: 0.5;
position: relative;
top: 0;
}
.pagination-wrap ul li.active {
width: 12px;
height: 12px;
top: 3px;
opacity: 1;
box-shadow: rgba(0, 0, 0, 0.1) 1px 1px 0px;
}
/*Header*/
h1,
h2 {
text-shadow: none;
text-align: center;
}
h1 {
color: #666;
text-transform: uppercase;
font-size: 36px;
}
h2 {
color: #7f8c8d;
font-family: Neucha, Arial, sans serif;
font-size: 18px;
margin-bottom: 30px;
}
/*ANIMATION*/
.slider-wrap ul,
.pagination-wrap ul li {
-webkit-transition: all 0.3s cubic-bezier(1, .01, .32, 1);
-moz-transition: all 0.3s cubic-bezier(1, .01, .32, 1);
-o-transition: all 0.3s cubic-bezier(1, .01, .32, 1);
-ms-transition: all 0.3s cubic-bezier(1, .01, .32, 1);
transition: all 0.3s cubic-bezier(1, .01, .32, 1);
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- ########################### Slider 1 ##########################-->
<div class="slider-wrap">
<ul class="slider">
<li>
<img class="object-fit_contain" src="http://www.spiritanimal.info/wp-content/uploads/Lion-Spirit-Animal-1.jpg">
</li>
<li>
<img class="object-fit_contain" src="https://cdn.images.express.co.uk/img/dynamic/galleries/x701/156708.jpg">
</li>
</ul>
<!--controls-->
<div class="pagination-wrap">
<div class="btns next"><i class="fas fa-greater-than"></i></div>
<div class="counter"></div>
<div class="btns previous"><i class="fas fa-less-than"></i></div>
</div>
<!--controls-->
</div>
<!-- ########################### Slider 2 ##########################-->
<div class="slider-wrap">
<ul class="slider">
<li>
<img class="object-fit_contain" src="http://www.spiritanimal.info/wp-content/uploads/Lion-Spirit-Animal-1.jpg">
</li>
<li>
<img class="object-fit_contain" src="https://cdn.images.express.co.uk/img/dynamic/galleries/x701/156708.jpg">
</li>
</ul>
<!--controls-->
<div class="pagination-wrap">
<div class="btns next"><i class="fas fa-greater-than"></i></div>
<div class="counter"></div>
<div class="btns previous"><i class="fas fa-less-than"></i></div>
</div>
<!--controls-->
</div>
You have multiple elements with the same ID. You will need to update your code to work off of class and "closest" related items if you need multiples of these on a single page.
For example, where you click "previous", you might need to change to something like:
//previous slide
$('.previous').click(function(event){
slideLeft(event.target); // to pass the clicked 'previous' button to slideLeft()
});
Then in your slideLeft() function, find the slider by whichever one is ancestrally closest to the clicked button:
function slideLeft(target){
pos--;
if(pos==-1){ pos = totalSlides-1; }
$(target).closest('.slider').css('left', -(sliderWidth*pos)); // only line I changed in your example
//*> optional
countSlides();
pagination();
}
I did not run this fully but the concept of "know which one is clicked, then find what to update from there" is what you're going for I believe.
I am trying to do a nice effect when the header leaves the current block. I want the background color and the color of the text to change when scrolling down.
html:
<header class="green">Logo</header>
<header class="red">Logo</header>
<section id='content1'>
<h1>Content</h1>
<p>Goes here!</p>
</section>
<section id='content2'>
<h1>Content</h1>
<p>Goes here!</p>
</section>
css:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
header {
width: 100%;
position: fixed;
display: block;
top: 0;
font-size: 20pt;
padding: 15px 10px
}
.green {
background: green;
color: #000;
z-index: 2
}
.red {
background: red;
color: #fff;
z-index: 1
}
section {
position: relative;
height: 500px;
padding: 100px 10px
}
#content1 {
background: #D9D9D9;
z-index: 1
}
#content2 {
background: #9FDAD0;
z-index: 2
}
An example serves best, something like this https://www.dropbox.com/
Thanks!
So i redid it with some Javascript.
This effect is awesome, feel free to improve it if you like!
Is this possible to accomplish without Javascript?
const secondBlock = document.getElementById('content2')
const header = document.getElementsByTagName('header')
const headerHeight = 61
function setHeader () {
const scrollPoint = window.pageYOffset + headerHeight
let blockPoint = 61 - (scrollPoint - secondBlock.offsetTop)
if (blockPoint <= 0) { blockPoint = 0 }
if (scrollPoint > secondBlock.offsetTop) {
header[0].style = `max-height: ${blockPoint}px;`
} else {
header[0].style = `max-height: ${headerHeight}px;`
}
window.requestAnimationFrame(setHeader)
}
window.requestAnimationFrame(setHeader)
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
header {
display: block;
font-size: 20pt;
height: 61px;
line-height: 61px;
padding-left: 10px;
position: fixed;
top: 0;
width: 100%;
}
header#first {
background: #8292C3;
color: #000;
overflow: hidden;
z-index: 10;
}
header#second {
background: #82C3B9;
color: #fff;
z-index: 9;
}
section {
height: 500px;
padding: 100px 10px;
position: relative;
}
#content1 {
background: #96A6D5;
}
#content2 {
background: #99D6CC;
}
<header id='first'>Logo - <small>scroll down to see the magic!</small></header>
<header id='second'>Logo - <small>scroll down to see the magic! COOL!</small></header>
<section id='content1'>
<h1>Content</h1>
<p>Goes here!</p>
</section>
<section id='content2'>
<h1>Content</h1>
<p>Goes here!</p>
</section>
The smooth transition you're looking for can be done in CSS, but you'll need some JavaScript in order to initiate the animation.
window.onscroll = function(){
var top = window.scrollY;
console.log('Top: ' + top);
var header = document.getElementsByTagName('header');
var offset = header.innerHeight; //changed offset to be dynamic, so it works on mobile screens.
if(top > offset){
header[0].classList.remove('top');
header[0].classList.add('scrolled');
} else {
header[0].classList.remove('scrolled');
header[0].classList.add('top');
}
};
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
position: relative;
}
header {
width: 100%;
position: fixed;
height: 75px;
display: block;
top: 0;
z-index: 100;
font-size: 20pt;
padding: 15px 10px
}
header.top {
background: #222;
color: #fff;
transition: all 0.3s ease;
}
header.scrolled {
background: #555;
color: #e0e0e0;
transition: all 0.3s ease;
}
.green {
background: green;
color: #000;
z-index: 2
}
.red {
background: red;
color: #fff;
z-index: 1
}
section {
position: relative;
height: 800px;
padding: 100px 10px
}
#content1 {
background: #D9D9D9;
z-index: 1
}
#content2 {
background: #9FDAD0;
z-index: 2
}
<header class="top">Logo</header>
<section id='content1'>
<h1>Content</h1>
<p>Goes here!</p>
</section>
<section id='content2'>
<h1>Content</h1>
<p>Goes here!</p>
</section>
This basically says that when we scroll passed the height of the header (in this case 50px), remove the "top" class from it, and add the "scrolled" class from it. You can use the css selectors header.top and header.scrolled to do your transition animations. Be sure to use transition: background-color (time) (timing function), color (time) (timing function); to achieve the smoothness you're looking for.
You can change it with the class. Like i use this website.
http://www.moumaachi.com/
it has class like this
<div class="header-v2 navbar-fixed-top">
but when scroll down to 50 px then it will showa this
<div class="header-v2 navbar-fixed-top top-nav-collapse">
and normal it has
<div class="thiswillhide">
but when scroll down more then it wil like this
<div class="thiswillhide hidesearch">
you can use this code
<script>
//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".header-v2").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
if ($(".header-v2").offset().top > 600) {
$(".thiswillhide").addClass("hidesearch");
} else {
$(".thiswillhide").removeClass("hidesearch");
}
});
</script>
thanks
I want to use these ripple buttons that I created, but when I do an <a href> tag the background color of the buttons change. I happen to believe it is in the CSS, but I cant be sure. I turned text decoration off so the underline so wouldn't show, but that's it about it.
var addRippleEffect = function(e) {
var target = e.target;
if (target.tagName.toLowerCase() !== 'button') return false;
var rect = target.getBoundingClientRect();
var ripple = target.querySelector('.ripple');
if (!ripple) {
ripple = document.createElement('span');
ripple.className = 'ripple';
ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px';
target.appendChild(ripple);
}
ripple.classList.remove('show');
var top = e.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop;
var left = e.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft;
ripple.style.top = top + 'px';
ripple.style.left = left + 'px';
ripple.classList.add('show');
return false;
}
document.addEventListener('click', addRippleEffect, false);
body {
margin: 0;
padding: 0;
}
#wrap {
position: absolute;
width: 100%;
height: 100%;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
}
h1 {
display: flex;
margin: 0;
padding: 0;
align-items: center;
flex: 2;
font-family: 'Open Sans';
}
#main {
flex: 5;
}
button {
position: relative;
display: block;
width: 13em;
height: 3em;
margin: 2em;
border: none;
outline: none;
letter-spacing: .2em;
font-weight: bold;
background: #dfdfdf;
cursor: pointer;
overflow: hidden;
user-select: none;
border-radius: 2px;
font-family: 'Open Sans';
}
button:nth-child(2) {
color: #fff;
background: #4285f4;
transition: all 0.3s ease-in-out;
}
button:nth-child(2):hover {
background: #6ea2f7;
}
button:nth-child(3) {
color: #fff;
background: #00bad2;
}
button:nth-child(4) {
color: #fff;
background: #ff8a80;
}
.ripple {
position: absolute;
background: rgba(0, 0, 0, .15);
border-radius: 100%;
transform: scale(0);
pointer-events: none;
}
.ripple.show {
animation: ripple .75s ease-out;
}
#keyframes ripple {
to {
transform: scale(2);
opacity: 0;
}
}
a {
text-decoration: none;
}
<link href='https://fonts.googleapis.com/css?family=Open+Sans:600' rel='stylesheet' type='text/css'>
<div id="wrap">
<h1>Ripple Effect</h1>
<div id="main">
<button>BUTTON</button>
<a href="http://www.google.com">
<button>BUTTON</button>
</a>
<button>BUTTON</button>
<button>BUTTON</button>
</div>
</div>
The reason it doesn't work is that button:nth-child(2) will match a button element which is the second child of its parent.
In your case, your button is not the 2nd child of its parent, because its parent is <a>.
Do this:
<button>
BUTTON
</button>
See how it works now?
For more information on nth-child vist the nth-child MDN page.