I have a page with Video background and a div with some text on it, I want to put a button in center of page so that when users click on it, the current div (text) slide up with css transition and another div show up with same transition.
I want to move just divs with fixed background.
What is the best way to make this effect happens?
var oT = $('#old'),
nT = $('#new').css({
top: '+=50',
opacity: 0
});
$('button').one('click', function() {
$(this).attr("disabled", "disabled");
oT.animate({
top: '-=50',
opacity: 0
}, function() {
nT.animate({
top: '-=50',
opacity: 1
});
});
});
html,
body {
width: 100%;
height: 100%;
}
#container {
width: 100%;
height: 100%;
background: url(http://www.quilabytes.com/wp-content/uploads/2013/06/light_shadow_blur_background_46792_1920x1200.jpg) no-repeat center;
position: relative;
}
button {
margin: 0 auto;
width: 100px;
position: absolute;
left: 50%;
margin-left: -50px;
top: 65%;
}
#old,
#new {
width: 100%;
position: absolute;
top: 30%;
}
p {
font-family: helvetica;
color: #fff;
text-shadow: 0px 0px 20px #000;
font-size: 40px;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="container">
<div id="old">
<p>Old Text</p>
</div>
<div id="new">
<p>New Text</p>
</div>
<button>Click Me!</button>
</div>
If DIV with text absolutely positioned, you should try animate:
$('#your_div_id').animate({'top':some_value, 'opacity':0},time);
if you need completely hide DIV, you need assign negative value to some_value.
Related
I am building a website with a lot of images. On the sidebar is a text (which stays in place with position: sticky), I would like it to change its color from black to white while overlapping the images it passes while scrolling down the webpage. How do I do that?
I found a Codepen-example, doing exactly this. But it's complicated to extract the requested code since the Javascript also handles a scrolling animation.
https://codepen.io/Atise/pen/WNOmyxY
My sidenav functions like this one: https://codepen.io/clairecodes/pen/bvWKdr
I have given this a second thought: The problem with this approach is that it won't work on an ordinary website while scrolling through its length vertically. The white text should only be visible when approached by the navbar. To make this work, the images needs to have some trigger that shows the text (.section-title.on-dark) only when being approached by the navbar.
<div class="outer-container">
<div class="image-container" style="background-image: url('https://images.unsplash.com/photo-1570528812862-9984124e7e22?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ');">
<style>
body {
margin: 0;
min-height: 3000px;
font-family: 'Montserrat', sans-serif;
}
.outer-container {
max-width: 600px;
margin: auto;
width: 90%;
padding: 200px 0px;
position: relative;
}
.image-container {
padding-bottom: 100%;
background: black;
position: relative;
overflow: hidden;
z-index: 2;
background-size: cover;
background-position: center;
}
.section-title {
margin: 0;
font-size: 64px;
width: 100%;
text-align: center;
position: absolute;
top: 50%;
left: -30%;
transform: translateY(-50%);
z-index: 1;
white-space: nowrap;
}
.section-title.on-dark {
color: white;
}
.section-title span {
position: relative;
display: block;
}
</style>
<h2 class="section-title on-dark">
<span class="paralax-title">
Live The Adventure
</span>
</h2>
</div>
<h2 class="section-title">
<span class="paralax-title">
Live The Adventure
</span>
</h2>
</div>
<script>
let didScroll = false;
let paralaxTitles = document.querySelectorAll('.paralax-title');
const scrollInProgress = () => {
didScroll = true
}
const raf = () => {
if(didScroll) {
paralaxTitles.forEach((element, index) => {
element.style.transform = "translateX("+ window.scrollY / 10 + "%)"
})
didScroll = false;
}
requestAnimationFrame(raf);
}
requestAnimationFrame(raf);
window.addEventListener('scroll', scrollInProgress)
</script>
You're prebably looking for mix-blend-mode.
.bg {
width: 200vw;
height: 200vh;
background-image: url(https://images.pexels.com/photos/7718429/pexels-photo-7718429.jpeg);
background-size: cover;
}
.text {
margin: 0;
font-size: 50px;
position: fixed;
color: white;
mix-blend-mode: difference;
}
<div class="bg">
<h1 class="text">Lorem Ipsum</h1>
</div>
There are values other that difference. Read the MDN Docs and find the value that best suits your website.
I was wondering how would I turn an overlay into a button? What I don't want is a button that one manually presses to reveal an overlay. What I'd like is automatically when one enters the browser, an overlay is there, and in order to remove it they can click anywhere on the screen and it disappears, letting them interact with the page itself.
Below is the code of the overlay itself, but what would I need to incorporate into it to make it an accessible imaginary button?
...
<style>
body {
margin: 0;
padding: 0;
}
section {
width: 100%;
height: 650px;
background: url("https://static.scientificamerican.com/sciam/cache/file/7A715AD8-449D-4B5A-ABA2C5D92D9B5A21_source.png?w=590&h=800&756A88D1-C0EA-4C21-92BE0BB43C14B265");
background-size: cover;
position: relative;
overflow: hidden;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgb(105, 105, 105, .9);
}
#Title {
padding-top: 60px;
font-size: 30px;
color: red;
font-family: 'Rock Salt', cursive;
-webkit-text-stroke: 1px black;
}
#sub-text {
font-family: 'Covered By Your Grace', cursive;
color: red;
font-size: 25px;
-webkit-text-stroke: .5px black;
}
</style>
</head>
<body>
<section>
<div class = "overlay">
<div id = "Title">
<h1 align = "center"> Title </h1>
</div>
<div id = "sub-text">
<h2 align = "center">Subtext</h2>
</div>
</div>
</section>
</body>
</html>
...
You don't necessarily need JS :)
#overlay {
position: fixed;
z-index: 9999;
top: 0;
left: 0;
bottom: 0;
right: 0;
transition: 2s;
background: gold;
display: flex;
align-items: center;
justify-content: center;
visibility: visible;
}
#overlay-handler:checked ~ #overlay {
visibility: hidden;
opacity: 0;
}
<input id="overlay-handler" type="radio" hidden>
<label for="overlay-handler" id="overlay">
<h2>WELCOME.<br>Click anywhere to continue</h2>
</label>
<h1>Hi there...</h1>
If you set the overlay to have position: fixed and proper z-index it would cover the page by default.
Then declare a click listener on it to either set its display to none or remove it from the DOM.
Just don't use it as a container for the real content
document.addEventListener('DOMContentLoaded', e => {
document.querySelector('#overlay').addEventListener('click', clickEvent => {
clickEvent.target.classList.add('invisible');
});
});
#overlay {
position: fixed;
display: block;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 10000;
background-color: rgba(100, 100, 100, 0.5);
padding: 4em 10%;
text-align: center;
font-weight: bold;
}
#overlay.invisible {
display: none;
}
<div id="overlay">
Click me to interact
</div>
<div>
This is the real content But you can't click me without closing the overlay
</div>
You can make the overlay disappear when the body of the HTML is clicked.
<body onclick="document.getElementsByClassName('overlay')[0].style.display = 'none'">
...
</body>
I have a div scroll-content that contains another div fixme which I want to fix only when the scroll-content div is at the top of the screen. If user scrolls past the scroll-content div, the fixme should disappear. I am using the code below but it doesn't seem to work:
var fixmeTop = $('.fixme').offset().top;
$(window).scroll(function() {
var currentScroll = $(window).scrollTop();
if (currentScroll >= fixmeTop) {
$('.fixme').css({
position: 'fixed',
top: '50%',
left: '50%',
display: 'block'
});
} else {
$('.fixme').css({
display: 'none'
});
}
});
body {
height: 3000px;
}
.content {
height: 500px;
background: white;
}
.scroll-content {
background: black;
height: 1000px;
}
.fixme {
background: green;
color: white;
text-align: center;
width: 100px;
height: 100px;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div class="content"></div>
<div class="scroll-content">
<div class="fixme">Scroll here</div>
</div>
This here is an example that uses position sticky to keep the .fixme element inside of the .scroll-content element. It probably didn't work before in your own attempt because of jQuery overwriting the position property with fixed.
I hope that this is the desired effect.
Otherwise let us know so we can help you figure out another solution.
body {
height: 3000px;
}
.content {
height: 500px;
background: white;
}
.scroll-content {
position: relative;
background: black;
height: 1000px;
}
.fixme {
position: sticky;
top: calc(50% - 50px);
left: 50%;
background: green;
color: white;
text-align: center;
width: 100px;
height: 100px;
transform: translate(-50%, 0%);
}
<div class="content"></div>
<div class="scroll-content">
<div class="fixme">Scroll here</div>
</div>
Wasn't sure the best way to title this question...view the codepen in question:
http://codepen.io/LA1CH3/pen/NqPJEx
I want to have a list of elements that have a "read more" link that slides up with the title when hovered over. I want all the elements to be the same height, though they will all have different titles.
HTML:
<div class="a">
<img src="http://toronto3d.ca/wp-content/uploads/2011/10/3d-archiitectural-rendering-interior-classic-kitchen.jpg">
<div class="hover">
<h3>The Complete Works of William Shakespeare Bla Bla Overflow</h3>
<h4>Link here</h4>
</div>
</div>
CSS:
.a {
background-color: blue;
padding: 10px;
display: inline-block;
transition: 1s;
min-height: 250px;
}
h3 {
width: 100%;
}
.hover {
display: block;
background-color: red;
text-align: center;
position: relative;
height: 60px;
overflow: hidden;
transition: 1s;
width: 290px;
}
.b {
margin-top: -50px;
height: 100px;
}
JS:
$(".a").hover(function(e){
e.preventDefault();
$(this).find(".hover").toggleClass("b");
});
Essentially, I would like to have a div, which holds and image and a title underneath. When the image is hovered, the title would slide up, and from the overflow below the image, a "read more" link would slide up in place of where the title is. I have sort of implemented this, but it doesn't seem right. Also, if I have a title that is long, it will run off the hover div. Whats a good way to make this functionality work?
Try with absolute positioned elements. Modified codepen
.a {
background-color: blue;
border: 10px solid blue;
display: inline-block;
transition: 1s;
min-height: 250px;
overflow: hidden;
position: relative;
}
h3, h4 {
margin: 10px 0;
font-size: 1.2em;
line-height: 1.3;
}
.hover {
display: block;
background-color: red;
text-align: center;
position: absolute;
transition: 1s;
width: 100%;
left: 0;
bottom: -2.3em;
}
.b {
bottom: 0;
}
As #isherwood mentioned, you can omit JavaScript.
Have messed about with your codepen to suggest this
var origPanelText = $.trim($('#title').html());
$(".a").hover(function(e){
e.preventDefault();
$(this).find(".hover").toggleClass("b");
});
$('#title').mouseenter(function(){
var addition = 'Read more...';
var panelText = $.trim($('#title').html()).length;
var theTitle=$.trim($(this).html());
if (panelText > 30) {
var cutString = theTitle.substring(0, 30);
$(this).html(cutString+addition);
}
});
$('#title').mouseleave(function(){
$('#title').html(origPanelText);
});
Any use? EJK
I am trying to centre a div horizontally inside another div. The div that I am trying to centre is a scroll-down button that uses jQuery and has a custom icon font made by me and default width/height. I want to centre this div inside my main div and keep the original size as I want to keep using it as a button. For example:
I want to make something like the white arrow that is pointing down in the centre but without messing with my width.
This is my code:
HTML
<div id="intro-tab"> <!-- First/Intro Tab -->
<div id="introtab-godownbtn">Q</div>
</div>
CSS
#intro-tab {
width: auto;
height: 100%;
position: absolute;
left: 0px;
right: 0px;
top: 0px;
background-color: red;
box-shadow: 0px 1px 3px #000;
}
#introtab-godownbtn {
font-family: iconFont;
font-size: 50px;
position: absolute;
bottom: 25px;
width: 60px;
height: 30px;
left: 50%;
margin-left: 30px;
background-color: #FFF;
}
#introtab-godownbtn:hover {
cursor: pointer;
}
jQuery
$('#introtab-godownbtn').click(function(){
$("html, body").animate({
scrollTop: (screen.height - 90)
}, 600);
return false;
});
I have tried many ways to centre the button introtab-godownbtn but it doesn't work or it just messes up my buttons size and clicking location. Any solution to my problem?
From what I understand, you're trying to horizontally center an HTML element. Generally, one would use the margin: 0 auto; approach where a fixed width is set on the element it's being applied to. Here's an example of such: http://jsfiddle.net/5XTq2/
Can you provide a mockup/screenshot of the layout you're trying to achieve, if this answer doesn't help? I can happily update the answer to accommodate your need.
EDIT:
As per your Spotify example, if you inspect the page and select the down arrow, it will have the follow styles.
.scroller-arrow {
width: 60px;
height: 60px;
background-image: url(../i/_global/arrow-big.png);
cursor: pointer;
display: block;
margin: 0 auto;
position: relative;
-webkit-tap-highlight-color: transparent;
}
To get the inner absolutely positioned div to be horizontally and vertically centered:
http://jsfiddle.net/7P4n5/
http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/
HTML:
<div id="intro-tab">
<div id="introtab-godownbtn">Q</div>
</div>
CSS:
body { margin: 0; }
#intro-tab {
width: 100%;
height: 100%;
position: absolute;
background-color: red;
box-shadow: 0px 1px 3px #000;
}
#introtab-godownbtn {
background-color: #FFF;
font-family: iconFont;
font-size: 20px;
width: 60px;
/* this does the centering */
height: 30px;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#introtab-godownbtn:hover { cursor: pointer; }