I would like to know how to make the rslides style transition with scale transition like the way clients div is changing after the clients link is clicked, here is the fiddle:
http://jsfiddle.net/vladicorp/ktqfq/1/
HTML CODE:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="container">
<div id="sections">
<div id="slider">
<div id="index_slider">
<ul class="rslides" >
<li><img src="http://www.emocool.com/work/slide2.jpg"></li>
<li><img src="http://www.emocool.com/work/slide2.jpg"></li>
</ul></div></div>
<script src="http://www.emocool.com/work/js/responsiveslides.min.js"></script>
<script>
$(function() {
$(".rslides").responsiveSlides({
speed: 1000,
maxwidth: 1200
});
});
</script>
<div id="menu">clients </div>
<div id="clients">gfgd</div>
<div id="services"></div>
<div id="portfolio"></div>
<div id="contacts"></div>
</div></div>
CSS CODE:
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background:#fff;
}
#media (min-width: 1200px) {
#container {
width:1200px;
height:100%;
margin: 0 auto;
z-index:40;
position:relative;
}}
#media (max-width: 1200px) {
#container {
width:100%;
height:100%;
margin: 0 auto;
z-index:40;
position:relative;
}}
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
transition:all 1s ease;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li:first-child {
position: relative;
display: block;
float: left;
}
.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
}
#index_slider
{
width:100%;
position: relative;
float: left;
}
#slider {
margin: 0 auto;
}
a {
color:#fff;
}
/* menu styles */
#menu {
background:#181818;
color:#6e7166;
height:63px;
width:100%;
float:left;
position:relative;
}
/* sections */
#sections {
transition:all 1s ease;
}
#clients {
height:44px;
background:#333;
position:relative;
float:left;
}
#sections:target #clients {
height:90px;
background:#333;
transition:all 1s ease;
}
#sections:target .rslides {
height:0px;
transition:all 1s ease;
}
adding the height of the slides fixed it:
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
transition:all 1s ease;
height:432px;
}
Related
i am interested in a carousel animation. so far it reacts to hover. So when I go to the second or third element, these areas enlarge and more information is shown. the areas should also open up one after the other or react as if you were driving across the other two areas. i was looking for slides and carousel animation but i don't know exactly what to look for.
$(document).ready(function () {
$(".bloc").hover(function () {
$(this).toggleClass("active"); //Toggle the active class to the area is hovered
$('.first').toggleClass("active"); //Toggle the active class to the area is hovered
});
});
#import url('https://fonts.googleapis.com/css?family=Oswald:200,300,400,500,600,700');
#import url('https://fonts.googleapis.com/css?family=PT+Sans:400,700');
body {
margin: 0;
}
.container {
width: 100%;
height: 100vh;
}
ul {
margin: 0;
padding: 0;
}
ul li {
position: relative;
display: inline-flex;
columns: 3;
width: calc(25% - 22px);
height: calc(100vh - 20px);
margin: 10px;
background-size: cover;
background-position: center center;
transition: .5s all ease-in-out;
overflow: hidden;
}
ul li .bloc {
position: relative;
overflow: hidden;
}
ul li .content {
opacity: 0;
left: 40px;
bottom: 40px;
position: absolute;
border-left: 6px solid #FFF;
padding-left: 20px;
transition: .2s all;
user-select: none;
}
ul li .content H2 {
letter-spacing: 5px;
color: #FFF;
font-size: 35px;
margin: 0;
}
ul li .content H3 {
font-weight: 400;
color: #FFF;
font-size: 25px;
margin: 0;
}
.active .content {
opacity: 1;
transition: 2s all;
transition-delay: .5s;
}
ul li .bloc::before {
opacity: 0;
position: absolute;
content: '';
background-color: rgba(0, 0, 0, 0);
width: 100%;
height: 100%;
animation: opacity 1s;
}
.active {
position: relative;
width: calc(50% - 22px);
transition: .5s all ease-in-out;
}
.active::before {
top: 0;
position: absolute;
content: '';
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
animation: opacity 1s;
}
.first {
background: red;
}
.second {
background: red;
}
.third {
float: right;
background: red;
}
#keyframes opacity {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<ul>
<li class="bloc first active">
<div class="content">
<H2>First title</H2>
<H3>It's a first subtitle</H3>
</div>
</li>
<li class="bloc second">
<div class="content">
<H2>Second title</H2>
<H3>Subtitle</H3>
</div>
</li>
<li class="bloc third">
<div class="content">
<H2>Third title</H2>
<H3>Last subtitle</H3>
</div>
</li>
</ul>
</div>
to describe it better, I added a gif animation of how the elements should behave.
You can use setInterval to create a continuous animation and temporarily stop that interval when the user hovers over one of the slides.
$(document).ready(function() {
const animation = () => {
const activeCarouselElement = $('.bloc.active');
activeCarouselElement.removeClass('active');
const nextCarouselElement = activeCarouselElement.next().length ? activeCarouselElement.next() : activeCarouselElement.siblings()[0];
$(nextCarouselElement).addClass('active');
};
let animationInterval = setInterval(animation, 3500);
$(".bloc").hover(function() {
$('.bloc.active').removeClass("active");
$(this).addClass("active");
clearInterval(animationInterval);
});
$(".bloc").mouseleave(function() {
animationInterval = setInterval(animation, 3500);
});
});
#import url('https://fonts.googleapis.com/css?family=Oswald:200,300,400,500,600,700');
#import url('https://fonts.googleapis.com/css?family=PT+Sans:400,700');
body {
margin: 0;
}
.container {
width: 100%;
height: 100vh;
}
ul {
margin: 0;
padding: 0;
}
ul li {
position: relative;
display: inline-flex;
columns: 3;
width: calc(25% - 22px);
height: calc(100vh - 20px);
margin: 10px;
background-size: cover;
background-position: center center;
transition: .5s all ease-in-out;
overflow: hidden;
}
ul li .bloc {
position: relative;
overflow: hidden;
}
ul li .content {
opacity: 0;
left: 40px;
bottom: 40px;
position: absolute;
border-left: 6px solid #FFF;
padding-left: 20px;
transition: .2s all;
user-select: none;
}
ul li .content H2 {
letter-spacing: 5px;
color: #FFF;
font-size: 35px;
margin: 0;
}
ul li .content H3 {
font-weight: 400;
color: #FFF;
font-size: 25px;
margin: 0;
}
.active .content {
opacity: 1;
transition: 2s all;
transition-delay: .5s;
}
ul li .bloc::before {
opacity: 0;
position: absolute;
content: '';
background-color: rgba(0, 0, 0, 0);
width: 100%;
height: 100%;
animation: opacity 1s;
}
.active {
position: relative;
width: calc(50% - 22px);
transition: .5s all ease-in-out;
}
.active::before {
top: 0;
position: absolute;
content: '';
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
animation: opacity 1s;
}
.first {
background: red;
}
.second {
background: red;
}
.third {
float: right;
background: red;
}
#keyframes opacity {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<ul>
<li class="bloc first active">
<div class="content">
<H2>First title</H2>
<H3>It's a first subtitle</H3>
</div>
</li>
<li class="bloc second">
<div class="content">
<H2>Second title</H2>
<H3>Subtitle</H3>
</div>
</li>
<li class="bloc third">
<div class="content">
<H2>Third title</H2>
<H3>Last subtitle</H3>
</div>
</li>
</ul>
</div>
I made a website, which is mobile responsive with a sticky header. But on Iphones the hamburger button is not in the right place, and also doesn't move with the sticky header perfectly. I don't know it is because of the Safari, however, I did not meet with this problem on other tools, only on iPhones. If I change the place of the Hamburger button in one place it won't look good on another phone.
I don't use Bootstrap.
My question is, how could I make my hamburger button to look good on every mobile?
window.onscroll = function() {myFunction()};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
}
header {
display: flex;
height: 20vh;
margin: auto;
align-items: center;
border-bottom: 1px solid var(--clr-accent);
}
.logo-container,
.nav-links {
display: flex;
}
.logo-container {
flex: 1;
position: relative;
left: 5%;
}
.logo {
font-weight: 400;
margin: 5px;
}
#myLogo{
max-width: 120px;
max-height: 120px;
}
.logo-container img{
max-width: 120px;
max-height: 120px;
}
/* Logo container JS*/
.logo-container { display: 'none' }
.logo-container.open { display: 'block' }
nav {
flex: 2;
display: flex; /* Make nav a flexbox container , also this makes a new problem*/
}
.nav-links {
margin-left:15%;
margin-right: 15%;
justify-content: center;
justify-content: space-between;
list-style: none;
flex: 1; /* Let it occupy rest of the container */
align-items: center; /* Align to the vertical center because logo is bigger. */
}
.nav-link {
color: var(--clr-dark);
font-size:20px;
text-decoration: none;
font-weight: 600;
}
.sticky {
position: fixed;
top: 10;
height: 20vh;
width:100%;
align-items: center;
background: rgba(255, 255, 255, 1);
}
#keyframes drop {
0% {
opacity: 0;
transform: translateY(-80px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
#media screen and (max-width: 767px){
/* Logo container JS*/
.logo-container { display: 'block' }
.line{
width: 30px;
height: 3px;
background: var(--clr-accent);
margin: 5px;
}
header{
background: white;
}
nav{
position: relative;
}
.hamburger{
position: fixed; /*this was absolute*/
cursor: pointer;
right: 5%;
top: 20%;
transform: translate(-5%, -280%); /*this was 200 with absolute*/
z-index: 2;
}
.nav-links
{ margin-left:0%;
margin-right: 0%;
justify-content: space-evenly;
background-color: var(--clr-light);
position: fixed;
height: 100vh;
width:100%;
flex-direction: column;
clip-path: circle(0px at 57% 10%);
-webkit-clip-path: circle(0px at 57% 10%);
transition: all 1s ease-out;
pointer-events: none;
text-align: center;
z-index: 1;
}
.nav-links.open{
clip-path: circle(1000px at 57% 10%);
-webkit-clip-path: circle(1000px at 57% 10%);
pointer-events:all;
}
.nav-links li{
opacity: 0;
}
.navlinks li a{
font-size: 25px;
}
.nav-links li:nth-child(1){
transition: all 0.5s ease 0.2s;
}
.nav-links li:nth-child(2){
transition: all 0.5s ease 0.4s;
}
.nav-links li:nth-child(3){
transition: all 0.5s ease 0.6s;
}
li.fade{
opacity: 1;
}
.nav-link {
color: var(--clr-dark);
font-size: 18px;
}
}
#media screen and (max-width: 1024px) {
.cta-select {
border: 2px solid #f48024;
background: transparent;
color: #f48024;
width: 100px;
height: 35px;
font-size: 12px;
}
.cta-add {
background: #f48024;
width: 100px;
height: 35px;
font-size: 12px;
margin: 30px 0px 0px 10px;
}
.cover img {
height: 65%;
padding: 15px; /*safari*/
}
.small-circle,
.medium-circle,
.big-circle {
opacity: 0.25;
}
.nav-link {
/* font-size:10px; */
text-decoration: none;
font-weight: 600;
}
.logo-container {
left: 2%;
}
.logo-container img{
max-width: 65px;
max-height: 65px;
}
.calendar {
right: 2%;
visibility: hidden;
}
.logo-click{
display: none;
visibility: hidden;
}
.header {
top: 10;
height: 20vh;
width:100%;
align-items: center;
}
.hamburger{
transform: translate(0%, -285%); /*this was 200 with absolute*/
z-index: 2;
}
}
#media screen and (max-width: 420px) {
.hamburger{
transform: translate(0%, -330%);
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 415px) {
.hamburger{
transform: translate(0%, -300%); /*this was 200 with absolute*/
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px; /*Safari*/
padding: 5px;
}
}
#media screen and (max-width: 376px) {
.hamburger{
transform: translate(0%, -320%); /*this was 200 with absolute*/
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 361px) {
.hamburger{
transform: translate(0%, -270%); /*this was 200 with absolute*/
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 321px) {
.hamburger{
transform: translate(0%, -245%); /*this was 200 with absolute*/
z-index: 2;
}
.cover img {
height: 56%;
border-radius: 50px;
margin: 5px;
padding: 5px;
}
}
<body>
<header class="header" id="myHeader">
<script src="https://www.google.com/recaptcha/api.js"></script>
<nav role="navigation">
<div class="logo-container" id="myLogo">
<img src="./img/logo.png" alt="logo"/>
</div>
<div class="hamburger" id="hamburgerID">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="nav-links">
<li><a class="nav-link" href="#details"> DETAILS</a></li>
<li><a class="nav-link" href="#description">DESCRIPTION</a></li>
<li><a class="nav-link" href="#aboutus">ABOUT US</a></li>
</ul>
</nav>
</header>
First Method
add align-items: center; to nav tag. that is
nav{align-items: center;}
Also remove top:20%; in hamburger class. That is
.hamburger{top:20%}
position:fixed element having atleast assign one of the top, left, bottom, right.
So, here right:5% is only enough.
window.onscroll = function() {myFunction()};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
--clr-accent:#111;
}
body {
font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
}
header {
display: flex;
height: 20vh;
margin: auto;
align-items: center;
border-bottom: 1px solid var(--clr-accent);
}
.logo-container,
.nav-links {
display: flex;
}
.logo-container {
flex: 1;
position: relative;
left: 5%;
}
.logo {
font-weight: 400;
margin: 5px;
}
#myLogo{
max-width: 120px;
max-height: 120px;
}
.logo-container img{
max-width: 120px;
max-height: 120px;
}
/* Logo container JS*/
.logo-container { display: 'none' }
.logo-container.open { display: 'block' }
nav {
flex: 2;
display: flex; /* Make nav a flexbox container , also this makes a new problem*/
align-items: center;
}
.nav-links {
margin-left:15%;
margin-right: 15%;
justify-content: center;
justify-content: space-between;
list-style: none;
flex: 1; /* Let it occupy rest of the container */
align-items: center; /* Align to the vertical center because logo is bigger. */
}
.nav-link {
color: var(--clr-dark);
font-size:20px;
text-decoration: none;
font-weight: 600;
}
.sticky {
position: fixed;
top: 10px;
height: 20vh;
width:100%;
align-items: center;
background: rgba(255, 255, 255, 1);
}
#keyframes drop {
0% {
opacity: 0;
transform: translateY(-80px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
#media screen and (max-width: 767px){
/* Logo container JS*/
.logo-container { display: 'block' }
.line{
width: 30px;
height: 3px;
background: var(--clr-accent);
margin: 5px;
}
header{
background: white;
}
nav{
position: relative;
}
.hamburger{
position: fixed; /*this was absolute*/
cursor: pointer;
right: 5%;
z-index: 2;
}
.nav-links
{
margin-left:0%;
margin-right: 0%;
justify-content: space-evenly;
background-color: var(--clr-light);
position: fixed;
height: 100vh;
width:100%;
flex-direction: column;
clip-path: circle(0px at 57% 10%);
-webkit-clip-path: circle(0px at 57% 10%);
transition: all 1s ease-out;
pointer-events: none;
text-align: center;
z-index: 1;
}
.nav-links.open{
clip-path: circle(1000px at 57% 10%);
-webkit-clip-path: circle(1000px at 57% 10%);
pointer-events:all;
}
.nav-links li{
opacity: 0;
}
.navlinks li a{
font-size: 25px;
}
.nav-links li:nth-child(1){
transition: all 0.5s ease 0.2s;
}
.nav-links li:nth-child(2){
transition: all 0.5s ease 0.4s;
}
.nav-links li:nth-child(3){
transition: all 0.5s ease 0.6s;
}
li.fade{
opacity: 1;
}
.nav-link {
color: var(--clr-dark);
font-size: 18px;
}
}
#media screen and (max-width: 1024px) {
.cta-select {
border: 2px solid #f48024;
background: transparent;
color: #f48024;
width: 100px;
height: 35px;
font-size: 12px;
}
.cta-add {
background: #f48024;
width: 100px;
height: 35px;
font-size: 12px;
margin: 30px 0px 0px 10px;
}
.cover img {
height: 65%;
padding: 15px; /*safari*/
}
.small-circle,
.medium-circle,
.big-circle {
opacity: 0.25;
}
.nav-link {
/* font-size:10px; */
text-decoration: none;
font-weight: 600;
}
.logo-container {
left: 2%;
}
.logo-container img{
max-width: 65px;
max-height: 65px;
}
.calendar {
right: 2%;
visibility: hidden;
}
.logo-click{
display: none;
visibility: hidden;
}
.header {
top: 10;
height: 20vh;
width:100%;
align-items: center;
}
.hamburger{
z-index: 2;
}
}
#media screen and (max-width: 420px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 415px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px; /*Safari*/
padding: 5px;
}
}
#media screen and (max-width: 376px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 361px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 321px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
border-radius: 50px;
margin: 5px;
padding: 5px;
}
}
.scrolling{color:#fff;background:orange;height:800px;padding:30px;}
<body>
<header class="header" id="myHeader">
<script src="https://www.google.com/recaptcha/api.js"></script>
<nav role="navigation">
<div class="logo-container" id="myLogo">
<img src="" alt="logo"/>
</div>
<div class="hamburger" id="hamburgerID">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="nav-links">
<li><a class="nav-link" href="#details"> DETAILS</a></li>
<li><a class="nav-link" href="#description">DESCRIPTION</a></li>
<li><a class="nav-link" href="#aboutus">ABOUT US</a></li>
</ul>
</nav>
</header>
<div class="scrolling">Content Here</div>
</body>
Second Method
We can align Hamburger icon to center by without translate
instead of adding
top:20%;
to calculated by
top: calc((20vh - 30px) / 2); // header height = 20vh and hamburger height = 30px makes half of both to align middle of header
window.onscroll = function() {myFunction()};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
--clr-accent:#111;
}
body {
font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
}
header {
display: flex;
height: 20vh;
margin: auto;
align-items: center;
border-bottom: 1px solid var(--clr-accent);
}
.logo-container,
.nav-links {
display: flex;
}
.logo-container {
flex: 1;
position: relative;
left: 5%;
}
.logo {
font-weight: 400;
margin: 5px;
}
#myLogo{
max-width: 120px;
max-height: 120px;
}
.logo-container img{
max-width: 120px;
max-height: 120px;
}
/* Logo container JS*/
.logo-container { display: 'none' }
.logo-container.open { display: 'block' }
nav {
flex: 2;
display: flex; /* Make nav a flexbox container , also this makes a new problem*/
}
.nav-links {
margin-left:15%;
margin-right: 15%;
justify-content: center;
justify-content: space-between;
list-style: none;
flex: 1; /* Let it occupy rest of the container */
align-items: center; /* Align to the vertical center because logo is bigger. */
}
.nav-link {
color: var(--clr-dark);
font-size:20px;
text-decoration: none;
font-weight: 600;
}
.sticky {
position: fixed;
top: 10px;
height: 20vh;
width:100%;
align-items: center;
background: rgba(255, 255, 255, 1);
}
#keyframes drop {
0% {
opacity: 0;
transform: translateY(-80px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
#media screen and (max-width: 767px){
/* Logo container JS*/
.logo-container { display: 'block' }
.line{
width: 30px;
height: 3px;
background: var(--clr-accent);
margin: 5px;
}
header{
background: white;
}
nav{
position: relative;
}
.hamburger{
position: fixed; /*this was absolute*/
cursor: pointer;
right: 5%;
top: calc((20vh - 30px) / 2); // header height = 20vh and hamburger height = 30px makes half of both to align middle of header
z-index: 2;
}
.nav-links
{
margin-left:0%;
margin-right: 0%;
justify-content: space-evenly;
background-color: var(--clr-light);
position: fixed;
height: 100vh;
width:100%;
flex-direction: column;
clip-path: circle(0px at 57% 10%);
-webkit-clip-path: circle(0px at 57% 10%);
transition: all 1s ease-out;
pointer-events: none;
text-align: center;
z-index: 1;
}
.nav-links.open{
clip-path: circle(1000px at 57% 10%);
-webkit-clip-path: circle(1000px at 57% 10%);
pointer-events:all;
}
.nav-links li{
opacity: 0;
}
.navlinks li a{
font-size: 25px;
}
.nav-links li:nth-child(1){
transition: all 0.5s ease 0.2s;
}
.nav-links li:nth-child(2){
transition: all 0.5s ease 0.4s;
}
.nav-links li:nth-child(3){
transition: all 0.5s ease 0.6s;
}
li.fade{
opacity: 1;
}
.nav-link {
color: var(--clr-dark);
font-size: 18px;
}
}
#media screen and (max-width: 1024px) {
.cta-select {
border: 2px solid #f48024;
background: transparent;
color: #f48024;
width: 100px;
height: 35px;
font-size: 12px;
}
.cta-add {
background: #f48024;
width: 100px;
height: 35px;
font-size: 12px;
margin: 30px 0px 0px 10px;
}
.cover img {
height: 65%;
padding: 15px; /*safari*/
}
.small-circle,
.medium-circle,
.big-circle {
opacity: 0.25;
}
.nav-link {
/* font-size:10px; */
text-decoration: none;
font-weight: 600;
}
.logo-container {
left: 2%;
}
.logo-container img{
max-width: 65px;
max-height: 65px;
}
.calendar {
right: 2%;
visibility: hidden;
}
.logo-click{
display: none;
visibility: hidden;
}
.header {
top: 10;
height: 20vh;
width:100%;
align-items: center;
}
.hamburger{
z-index: 2;
}
}
#media screen and (max-width: 420px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 415px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px; /*Safari*/
padding: 5px;
}
}
#media screen and (max-width: 376px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 361px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 321px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
border-radius: 50px;
margin: 5px;
padding: 5px;
}
}
.scrolling{color:#fff;background:orange;height:800px;padding:30px;}
<body>
<header class="header" id="myHeader">
<script src="https://www.google.com/recaptcha/api.js"></script>
<nav role="navigation">
<div class="logo-container" id="myLogo">
<img src="" alt="logo"/>
</div>
<div class="hamburger" id="hamburgerID">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="nav-links">
<li><a class="nav-link" href="#details"> DETAILS</a></li>
<li><a class="nav-link" href="#description">DESCRIPTION</a></li>
<li><a class="nav-link" href="#aboutus">ABOUT US</a></li>
</ul>
</nav>
</header>
<div class="scrolling">Content Here</div>
</body>
My code contains HTML, CSS and js file. Though I'm ok with CSS learning JS so I am getting stuck in it. The green color window in output seems to be slide but not happening so.
I am also using <script src="js/modernizr.custom.js"></script> to refer to the js page but it not happening so even if I have tried all these reloated stuff but i unable to refer from HTML even if it's not working on the same HTML page under TAG
$( "#toggle" ).click(function() {
$(".menu").toggleClass("closed");
$(this).toggleClass("closed");
$(".content").toggleClass("closed");
$("#wrapper").toggleClass("closed")
});
* { font-family:courier; box-sizing:border-box; }
html, body { margin:0; padding:0; height:100%; min-height:100%; background-color:floralwhite }
.menu { width:250px; height:100%; position:fixed; background-color:seagreen; transition:all 1s; left:0; z-index:50; overflow-y:auto; padding-bottom:100px; }
.menu.closed { left:-250px; }
#toggle { background-color:seagreen; height:100%; min-height:100%; width:50px; position:fixed; top:0; bottom:0; left:0px; z-index:25; &:hover { cursor:pointer; } &.closed { left:0px; top:0; bottom:0; right:0; width:100%; height:100%; opacity:.3; } transition:all .7s ease; }
.menu ul { list-style-type:none; padding:0; margin:85px 0 0 40px; padding-right:40px; }
.menu ul li { color:floralwhite; font-size:20px; margin:0 0 5px 0; display:block; height:40px; line-height:40px; &:hover { background-color:lighten(seagreen, 10%); cursor:pointer; } padding-left:10px; transition:all .3s; }
<div id="toggle">
</div>
<div class="menu closed">
<ul>
<li>Home</li>
<li>Logo</li>
<li>Stuff</li>
<li>Cooking</li>
<li>Games</li>
</ul>
</div>
Your CSS contains SCSS elements, like
#toggle {
...
#toggle:hover {
cursor: pointer;
}
...
}
There is no nesting in plain CSS. Convert these nested rules to normal CSS (and add jQuery to the snippet) to make it work.
In general, always make sure, that your markup, styles and javascript code doesn't have syntax errors. There are tons of tools for that.
$("#toggle").click(function() {
$(".menu").toggleClass("closed");
$(this).toggleClass("closed");
$(".content").toggleClass("closed");
$("#wrapper").toggleClass("closed")
});
* {
font-family: courier;
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
min-height: 100%;
background-color: floralwhite
}
.menu {
width: 250px;
height: 100%;
position: fixed;
background-color: seagreen;
transition: all 1s;
left: 0;
z-index: 50;
overflow-y: auto;
padding-bottom: 100px;
}
.menu.closed {
left: -250px;
}
#toggle {
background-color: seagreen;
height: 100%;
min-height: 100%;
width: 50px;
position: fixed;
top: 0;
bottom: 0;
left: 0px;
z-index: 25;
transition: all .7s ease;
}
#toggle:hover {
cursor: pointer;
}
#toggle.closed {
left: 0px;
top: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
opacity: .3;
}
.menu ul {
list-style-type: none;
padding: 0;
margin: 85px 0 0 40px;
padding-right: 40px;
}
.menu ul li {
color: floralwhite;
font-size: 20px;
margin: 0 0 5px 0;
display: block;
height: 40px;
line-height: 40px;
padding-left: 10px;
transition: all .3s;
}
.menu ul li:hover {
background-color: lighten(seagreen, 10%);
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="toggle">
</div>
<div class="menu closed">
<ul>
<li>Home</li>
<li>Logo</li>
<li>Stuff</li>
<li>Cooking</li>
<li>Games</li>
</ul>
</div>
$("#toggle").click(function() {
$(".menu").toggleClass("closed");
$(this).toggleClass("closed");
$(".content").toggleClass("closed");
$("#wrapper").toggleClass("closed")
});
* {
font-family: courier;
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
min-height: 100%;
background-color: floralwhite
}
.menu {
width: 250px;
height: 100%;
position: fixed;
background-color: seagreen;
transition: all 1s;
left: 0;
z-index: 50;
overflow-y: auto;
padding-bottom: 100px;
}
.menu.closed {
left: -250px;
}
#wrapper { margin-left: 50px;}
#wrapper.closed{ left: 250px; margin-left: 0px; transition: all .3s; position: relative;}
#toggle {
background-color: seagreen;
height: 100%;
min-height: 100%;
width: 50px;
position: fixed;
top: 0;
bottom: 0;
left: 0px;
z-index: 25;
transition: all .7s ease;
}
#toggle:hover {
cursor: pointer;
}
#toggle.closed {
left: 0px;
top: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
opacity: .3;
}
.menu ul {
list-style-type: none;
padding: 0;
margin: 85px 0 0 40px;
padding-right: 40px;
}
.menu ul li {
color: floralwhite;
font-size: 20px;
margin: 0 0 5px 0;
display: block;
height: 40px;
line-height: 40px;
padding-left: 10px;
transition: all .3s;
}
.menu ul li:hover {
background-color: lighten(seagreen, 10%);
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="toggle"> menu
</div>
<div class="menu closed">
<ul>
<li>Home</li>
<li>Logo</li>
<li>Stuff</li>
<li>Cooking</li>
<li>Games</li>
</ul>
</div>
<div id="wrapper"> dwdlkqnbwkjdbjqkbwkbqkh </div>
I need something like this in image. Also, it should have navigation buttons to scroll horizontally on click of navigation buttons so that the list is dynamic.
I am inserting code below with CSS and HTML. It has to be done only with CSS but for navigation icons we can use JavaScript. And also <li> element text should not overlap even if it's too long.
.timeline {
white-space: nowrap;
overflow-x: hidden;
}
.timeline ol {
font-size: 0;
width: 100vw;
padding: 250px 0;
transition: all 1s;
}
.timeline ol li {
position: relative;
display: inline-block;
list-style-type: none;
width: 160px;
height: 3px;
background: #e1e2e3;
}
.timeline ol li:last-child {
width: 280px;
}
.timeline ol li:not(:first-child) {
margin-left: 14px;
}
.timeline ol li:not(:last-child)::after {
content: '';
position: absolute;
top: 50%;
left: calc(100% + 1px);
bottom: 0;
width: 12px;
height: 12px;
transform: translateY(-50%);
border-radius: 50%;
background: #e1e2e3;
}
<div class="timeline">
<ol>
<li>abc</li>
<li>hello welcome</li>
<li>cool summer</li>
<li>hi there</li>
<li>whats up</li>
</ol>
</div>
try this:
.timeline {
overflow-x: hidden;
padding: 20px 0;
}
.timeline ol {
width: 100%;
transition: all 1s;
margin:0;
padding:0;
display:flex;
justify-content: space-between;
}
.timeline ol li {
list-style:none;
position: relative;
text-align:center;
flex-grow: 1;
flex-basis: 0;
padding: 0 5px;
}
.timeline ol li:before {
content:"";
width:10px;
height:10px;
display:block;
border-radius:50%;
background: #ccc;
margin:0 auto 5px auto;
}
.timeline ol li:not(:last-child)::after {
content: "";
width: calc(100% - 14px);
height: 2px;
display: block;
background: #ccc;
margin: 0;
position: absolute;
top: 4px;
left: calc(50% + 7px);
}
https://jsfiddle.net/uer3gxeo/1/
http://codepen.io/jzhang172/pen/YXoWZa
$(function(){
$('.tint.first').on('click', function() {
$(this).toggleClass('clicked');
});
$('.tint.one').on('click', function() {
$(this).toggleClass('clicked');
});
$('.tint.two').on('click', function() {
$(this).toggleClass('clicked');
});
});
/* Shared
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button {
border-radius: 100px;
}
/* Sections
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.section {
padding: 8rem 0 7rem;
text-align: center;
}
.section-heading,
.section-description {
margin-bottom: 1.2rem;
}
/* Hero
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.phones {
position: relative;
}
.phone {
position: relative;
max-width: 80%;
margin: 3rem auto -12rem;
}
.phone + .phone {
display: none;
}
/* Values
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.values {
background-image: url('../img/values-bg.jpg');
background-size: cover;
color: #fff;
padding-bottom: 5rem;
}
.value-multiplier {
margin-bottom: .5rem;
color: #11DFC7;
}
.value-heading {
margin-bottom: .3rem;
}
.value-description {
opacity: .8;
font-weight: 300;
}
/* Help
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.get-help {
border-bottom: 1px solid #ddd;
}
/* Categories
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.categories {
background-image: url('../img/values-bg.jpg');
background-size: cover;
color: #fff;
}
.categories .section-description {
margin-bottom: 4rem;
}
/* Bigger than 550 */
#media (min-width: 550px) {
.section {
padding: 12rem 0 11rem;
}
.hero {
padding-bottom: 12rem;
text-align: left;
height: 165px;
}
.phone {
position: absolute;
top: -7rem;
right: 3rem;
max-height: 362px;
z-index: 3;
}
.phone + .phone {
top: -6rem;
display: block;
max-width: 73.8%;
right: 0;
z-index: 2;
max-height: 338px;
}
.hero-heading {
font-size: 3.0rem;
position:relative;
z-index:100;
color:black;
font-weight:600;
}
}
/* Bigger than 750 */
#media (min-width: 750px) {
.hero {
height: 190px;
}
.hero-heading {
font-size: 3.2rem; z-index:100;color:black;
}
.section {
padding: 14rem 0 15rem;
}
.hero {
padding: 16rem 0 14rem;
}
.section-description {
max-width: 60%;
margin-left: auto;
margin-right: auto;
}
.phone {
top: -14rem;
right: 5rem;
max-height: 510px;
}
.phone + .phone {
top: -12rem;
max-height: 472px;
}
.categories {
padding: 15rem 0 8rem;
}
}
/* Bigger than 1000 */
#media (min-width: 1000px) {
.section {
padding: 20rem 0 19rem;
}
.hero {
padding: 22rem 0;
}
.hero-heading {
font-size: 4rem;
z-index:100;color:black;
}
.phone {
top: -16rem;
max-height: 615px;
}
.phone + .phone {
top: -14rem;
max-height: 570px;
}
}
/**********************************/
#media (max-width:1375px){
.container .row .one-half.column.phones{
}
}
.container .row .one-half.column.phones{
width:700px;
margin-left:350px;
margin-top:-100px;
}
/**********************************/
.tint.two{
position: absolute;
left:110px;
top: -250px;
z-index:1;
}
.tint{
position:relative;
width:500px;
height:400px;
cursor: pointer;
box-shadow: rgba(0,0,0,.2) 3px 5px 5px;
overflow:hidden;
z-index:6;
}
.tint.first{
position:relative;
bottom:150px;
left:50px;
}
.tint img{
height:500px;
width:700px;
}
.tint:before{
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(210, 232, 232, 0.24);
transition: all .3s linear;
}
.tint:hover:before,
{
background: none; transform:scale(1.0);
-ms-transform:scale(1.0);
-moz-transform:scale(1.0);
-webkit-transform:scale(1.0);
-o-transform:scale(1.0);
}
.tint.first:hover img{
/* Making images appear bigger and transparent on mouseover */
cursor: pointer;
transform:translateX(-30px);
-webkit-transition: all 7s ease;
-moz-transition: all 7s ease;
-o-transition: all 7s ease;
transition: all 7s ease;
}
/*------------TINTS ON CLICK
-----------------------------------*/
.tint.first.clicked{
position:relative;
top:-250px;
left:-70%;
z-index:100;
box-shadow:none;
background:transparent;
width:140%;
height:140%;
-webkit-transform: rotate(360deg); /* Safari */
transform: rotate(360deg);
-webkit-transition:1.5s;
}
.tint.first.clicked img{
width:100%;
height:100%;
}
.tint.first:hover.clicked img{
/* Making images appear bigger and transparent on mouseover */
transform:none;
}
/*************Background**/
.section.hero::after{
content: "";
background-image:url(../img/4.jpg);
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section hero">
<div class="container">
<div class="row">
<div class="one-half column">
<h4 class="hero-heading">
Start enjoying your Photographs Now. From anywhere.
</h4>
<a class="button button-primary" href=""target="_blank">Try it</a>
</div>
<div class="one-half column phones">
<div class="tint first">
<img src="http://img1.wikia.nocookie.net/__cb20140410195944/pokemon/images/archive/f/fc/20150101093541!025Pikachu_OS_anime_5.png">
</div>
</div>
</div>
</div>
</div>
For clarity, please open my codepen and follow these instructions:
1.) Hover over the picture and observe the translate hover effect and the tint on the picture vanishing. (Working as intended)
2.) Click the picture and do not move the mouse after clicking it, observe how the picture grows into the frame
3.) Re-click the picture or simply refresh the page to go back to its normal size and now click the picture and take your mouse immediately off the picture to anywhere other then the picture.
4.) Observe how the picture automatically transitions into the position without the growing.
Question:
From what I can tell, this is because the ".tint.first:hover img" is still in effect and I'm guessing that if I could disable that when I click on the picture, it would be fine. How would I do this?
Also, if anyone could tell me how I could make the picture responsive, that'd be great. I'm concerned how position:relative, top, left etc. would look like on other windows.
I would recommend that you add the CSS in .tint.first:hover img to a class and add/remove the class according to your needs.
on hover you add it, on click you check if it is set on the element and remove it.
on mouseout you set it again on the element (for next time you wish it to grow).
Hope I was clear.
Regards,
Saar
http://codepen.io/jzhang172/pen/YXoWZa
Working answer. When mouse enters region, add css property, when mouse leaves region, remove that css property.
$(function(){
$('.tint.first').mouseenter(function() {
$(this).addClass("me img");
});
$('.tint.first').mouseleave(function() {
$(this).removeClass("me img");
});
$('.tint.first').on('click', function() {
$(this).removeClass("me img");
$(this).toggleClass('clicked');
});
$('.tint.two').on('click', function() {
$(this).toggleClass('clicked');
});
});
/* Shared
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button {
border-radius: 100px;
}
/* Sections
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.section {
padding: 8rem 0 7rem;
text-align: center;
}
.section-heading,
.section-description {
margin-bottom: 1.2rem;
}
/* Hero
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.phones {
position: relative;
}
.phone {
position: relative;
max-width: 80%;
margin: 3rem auto -12rem;
}
.phone + .phone {
display: none;
}
/* Values
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.values {
background-image: url('../img/values-bg.jpg');
background-size: cover;
color: #fff;
padding-bottom: 5rem;
}
.value-multiplier {
margin-bottom: .5rem;
color: #11DFC7;
}
.value-heading {
margin-bottom: .3rem;
}
.value-description {
opacity: .8;
font-weight: 300;
}
/* Help
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.get-help {
border-bottom: 1px solid #ddd;
}
/* Categories
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.categories {
background-image: url('../img/values-bg.jpg');
background-size: cover;
color: #fff;
}
.categories .section-description {
margin-bottom: 4rem;
}
/* Bigger than 550 */
#media (min-width: 550px) {
.section {
padding: 12rem 0 11rem;
}
.hero {
padding-bottom: 12rem;
text-align: left;
height: 165px;
}
.phone {
position: absolute;
top: -7rem;
right: 3rem;
max-height: 362px;
z-index: 3;
}
.phone + .phone {
top: -6rem;
display: block;
max-width: 73.8%;
right: 0;
z-index: 2;
max-height: 338px;
}
.hero-heading {
font-size: 3.0rem;
position:relative;
z-index:100;
color:black;
font-weight:600;
}
}
/* Bigger than 750 */
#media (min-width: 750px) {
.hero {
height: 190px;
}
.hero-heading {
font-size: 3.2rem; z-index:100;color:black;
}
.section {
padding: 14rem 0 15rem;
}
.hero {
padding: 16rem 0 14rem;
}
.section-description {
max-width: 60%;
margin-left: auto;
margin-right: auto;
}
.phone {
top: -14rem;
right: 5rem;
max-height: 510px;
}
.phone + .phone {
top: -12rem;
max-height: 472px;
}
.categories {
padding: 15rem 0 8rem;
}
}
/* Bigger than 1000 */
#media (min-width: 1000px) {
.section {
padding: 20rem 0 19rem;
}
.hero {
padding: 22rem 0;
}
.hero-heading {
font-size: 4rem;
z-index:100;color:black;
}
.phone {
top: -16rem;
max-height: 615px;
}
.phone + .phone {
top: -14rem;
max-height: 570px;
}
}
/**********************************/
#media (max-width:1375px){
.container .row .one-half.column.phones{
}
}
.container .row .one-half.column.phones{
width:700px;
margin-left:350px;
margin-top:-100px;
}
/**********************************/
.tint.two{
position: absolute;
left:110px;
top: -250px;
z-index:1;
}
.tint{
position:relative;
width:500px;
height:400px;
cursor: pointer;
box-shadow: rgba(0,0,0,.2) 3px 5px 5px;
overflow:hidden;
z-index:6;
}
.tint.first{
position:relative;
bottom:150px;
left:50px;
}
.tint img{
height:500px;
width:700px;
}
.tint:before{
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(210, 232, 232, 0.24);
transition: all .3s linear;
}
.tint:hover:before,
{
background: none; transform:scale(1.0);
-ms-transform:scale(1.0);
-moz-transform:scale(1.0);
-webkit-transform:scale(1.0);
-o-transform:scale(1.0);
}
.me img{
/* Making images appear bigger and transparent on mouseover */
cursor: pointer;
transform:translateX(-30px);
-webkit-transition: all 7s ease;
-moz-transition: all 7s ease;
-o-transition: all 7s ease;
transition: all 7s ease;
}
/*------------TINTS ON CLICK
-----------------------------------*/
.tint.first.clicked{
position:relative;
top:-250px;
left:-70%;
z-index:100;
box-shadow:none;
background:transparent;
width:140%;
height:140%;
-webkit-transform: rotate(360deg); /* Safari */
transform: rotate(360deg);
-webkit-transition:1.5s;
}
.tint.first.clicked img{
width:100%;
height:100%;
}
.tint.first:hover.clicked img{
/* Making images appear bigger and transparent on mouseover */
transform:none;
}
/*************Background**/
.section.hero::after{
content: "";
background-image:url(../img/4.jpg);
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section hero">
<div class="container">
<div class="row">
<div class="one-half column">
<h4 class="hero-heading">
Start enjoying your Photographs Now. From anywhere.
</h4>
<a class="button button-primary" href=""target="_blank">Try it</a>
</div>
<div class="one-half column phones">
<div class="tint first">
<img src="http://img1.wikia.nocookie.net/__cb20140410195944/pokemon/images/archive/f/fc/20150101093541!025Pikachu_OS_anime_5.png">
</div>
</div>
</div>
</div>
</div>