I am trying to add a circular reveal animation to show the search toolbar in my webapp using CSS & JavaScript. I am trying to achieve the same animation as Whatsapp on Android.
I managed to make a circle grow animation. If you check the demo, you'll notice that I specified the circle's final width and height and made the transform: scale(0.0033) to scale(1) in order for the circle to not be blurry.
Unfortunately, I am facing some problems:
Cannot make the circle grow from the search icon.
The back icon and the search input are not showing when the circle expands. I am trying to do this by having a div covering the content and moving to the left at the same time as the circle showing the content.
On mobile, the search doesn't grow from the same point as on PC.
The circle does not cover the whole toolbar.
I tried a lot of methods and searched all over the internet with no luck. I think that here, professional developers and coders will certainly find better solutions to my problem. This is the
DEMO
website for you to check out.
it's not so difficult to simulate the whats app search.
Take a look this:
https://jsfiddle.net/pablodarde/9ndp7z3L/
It's possible with a little more code, to reach a better result.
HTML
<div class="navbar">
<div class="container">
<h1>Whats App</h1>
<button id='search'>
<i class="fa fa-search" aria-hidden="true"></i>
</button>
<div class="input-mask">
<input type="text" placeholder="Search">
</div>
</div>
</div>
CSS
html, body {
width: 100%;
margin: 0;
padding: 0;
}
.navbar {
width: 100%;
height: 60px;
box-sizing: border-box;
background: #009688;
overflow: hidden;
}
.container {
position: relative;
width: 100%;
height: 0;
}
h1 {
position: absolute;
width: 300px;
height: 60px;
margin: 0;
top: 15px;
left: 15px;
font: normal 24px Arial, Verdana;
color: #fff;
}
button {
position: absolute;
top: 10px;
right: 15px;
border: 0;
background: 0;
color: #fff;
font-size: 28px;
cursor: pointer;
outline: 0;
}
.input-mask {
position: absolute;
top: 30px;
right: -30px;
display: flex;
align-items: center;
width: 0;
height: 0;
border-radius: 50%;
background: #fff;
overflow: hidden;
transition: all ease .6s;
}
input {
position: absolute;
right: 0;
height: 60px;
border: 0;
font-size: 20px;
padding: 0 0 0 10px;
box-sizing: border-box;
}
JavaScript
const search = document.querySelector('#search');
const input = document.querySelector('.container input');
const inputMask = document.querySelector('.input-mask');
const screenW = document.documentElement.clientWidth;
input.style.width = screenW +'px';
search.addEventListener('click', (e) => {
inputMask.setAttribute('style', 'width: '+ Number(screenW+30) +'px; height: '+ screenW +'px; top: -'+ screenW/2 +'px; padding-top: 30px; right: -3px;');
input.focus();
});
input.addEventListener('blur', (e) => {
inputMask.setAttribute('style', 'width: 0; height: 0; top: 30px;');
input.value = '';
});
Found the solution. Using it at https://mdcwp.ml. I just used clip-path.
Related
I have a piece of code that when user hover the slider bar, a box will appear. Everything works as expected but when the user move the mouse to the beginning or to the end of the slider, the box overflow the content.
I'm looking for a way that keep the box inside the blue area
Here is my code =>
var left = document.getElementById('core').getBoundingClientRect().left - document.documentElement.getBoundingClientRect().left;
window.onmousemove = function (e) {
let x = ((e.clientX + window.pageXOffset) - left);
document.getElementById("thumbnail").style.left = (x + "px");
}
body {
overflow: hidden;
}
.container {
width: 100%;
max-width: 800px;
position: relative;
background-color: blue;
height: 200px;
overflow: hidden;
}
.core {
margin: 0;
display: flex;
position: absolute;
bottom: 4px;
width: 100%;
flex-wrap: nowrap;
background-color: red;
height: auto;
}
.range {
width: 90%;
margin: 0 auto;
}
.range:hover + .thumbnail {
display: block;
}
.thumbnail {
display: none;
z-index: 1;
position: absolute;
bottom: 30px;
right: auto;
margin: 0;
width: 12em;
height: 7em;
background: rgb(200, 200, 200);
pointer-events: none;
padding: 2px 2px;
transform: translateX(-50%);
left: 50%;
}
.thumbnail::before {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
border: 8px solid transparent;
border-top: 8px solid rgb(200, 200, 200);
transform: translateY(-19%);
}
<div class="container">
<div id="core" class="core">
<input id="progress" class="range" type='range' min="0" max="100" step="0.01" value="0">
<div id="thumbnail" class="thumbnail"></div>
</div>
</div>
[ If you want jsfiddle => https://jsfiddle.net/ram9wc65/ ]
Here is a image that show +- the expected output =>
image (I cannot embed images yet)
How can I fix this? How can I keep the box inside of blue area? I spent many hours working on it but no success.
Thank you.
In your onMouseMove function, you need to get the width of the thumbnail and divide that by 2, to get the minimum left position and calculate the maximum right position (width - minimum).
Then make sure you set the left property of the thumbnail no smaller than the minimum and no larger than the calculated maximum.
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 am trying to make banner with moving text. I came up with a way to do it but unfortunately there are two major issues with my implementation.
I have to manually adjust the width values in px myself depending on the length of the text.
It causes the body size to be larger in terms of width. I want the body to remain 100% / the same size as the window.
Any idea how I can resolve these two issues or if there is a better way to implement this?
let txtAnnounce = document.createElement('div');
txtAnnounce.style = 'display: block; position: absolute; width: 600px; height: 45px; top: 65px; left: 0px; color: white; line-height: 45px; text-align: center;';
txtAnnounce.innerHTML = "Some text blah blah blach... Good for announcements with long text....! :) "
document.body.appendChild(txtAnnounce);
let txtAnnounce2 = document.createElement('div');
txtAnnounce2.style = 'display: block; position: absolute; width: 600px; height: 45px; top: 65px; left: 600px; color: white; line-height: 45px; text-align: center;';
txtAnnounce2.innerHTML = "Some text blah blah blach... Good for announcements with long text....! :) "
document.body.appendChild(txtAnnounce2);
let curLeft = 0;
let curLeft2 = 0;
setInterval(function() {
curLeft--;
curLeft2--;
if (curLeft < -600) {
curLeft = 0;
}
if (curLeft2 < 0) {
curLeft2 = 600;
}
txtAnnounce.style.left = curLeft.toString() + 'px';
txtAnnounce2.style.left = curLeft2.toString() + 'px';
}, 10);
<div id="announce" style="position: absolute; display: block; top: 65px; left: 0px; border-bottom: 1px solid #cccccc; height: 45px; width: 100%; background-color: #008aff; color: white; text-align: center; line-height: 45px; font-family: Arial, Helvetica, sans-serif;"></div>
You can even give CSS animation a try and define your container sizes with respect to device's view port.
overflow: hidden keeps the announcement--text contained within the announcement container.
.announcement {
background: #008aff;
padding: 15px;
color: white;
overflow: hidden;
}
.announcement--text {
position: relative;
left: 100vw;
white-space: nowrap;
animation: move 10s infinite;
animation-timing-function: linear;
}
#keyframes move {
from {left: 100vw;}
to {left: -100vw;} //maximum length of your announcement
}
<div class="announcement">
<div class="announcement--text">Some text blah blah blach... Good for announcements with long text....! </div>
</div>
I'm currently making a jquery image slider of 2 images where you can slide left or right to see the before and after photos. I have everything i want set except for the position of the cover image. About 40% of the cover image seems to shift off to the right of the border but the 2nd image is position perfected inside the border. Please advise on how I can put my cover image inside the border perfectly like my 2nd image.
HTML:
<div class="con">
<img src="warming1.jpg" class="imageOne">
<div class="coverImage"></div>
<div class="handle"></div>
<script type="text/javascript">
$(".handle").draggable({
axis: "x",
containment: "parent",
drag: function () {
var position = $(this).position();
var positionExtra = position.left + 6;
$(".coverImage").width(positionExtra + "px");
}
});
</script>
</div>
CSS:
.con {
top:2140px;
left:10px;
width: 280px;
height: 230px;
border: 2px solid;
position: absolute;
z-index:1
}
.con img {
height: 100%;
position: absolute;
}
.coverImage {
position: absolute;
background: url("warming2.jpg");
background-size: auto 100%;
width: 100%;
height: 100%;
}
.handle {
width: 0px;
height: 100%;
border-left: 12px solid #fff;
position: absolute;
left: 50%;
}
.handle:after {
content: "DRAG";
display: block;
width: 60px;
height: 60px;
border: 2px solid #eee;
border-radius: 50%;
color: #999;
line-height: 60px;
font-weight: 300;
text-align: center;
background: #fff;
position: absolute;
left: -36px; top: 0; bottom: 0;
margin: auto;
}
Positioning Picture 1 within the Element containing the border:
Obtain width of element with the border
Obtain width of 2nd picture
Set pic1.width = borderElement.width - pic2.width
Position pic1 at borderElement.right - pic1.width
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; }