I have a down link that moves the page down to the next section of the website when the user click. How can i make this fade into a back to top button when the user begins to scroll. Is there also a way of fixing this into position. Guessing this would be done through Jquery but not too sure.
<div class="down-link"><i class="ss-navigatedown"></i></div>
.down-link {
width:100%;
height:50px;
}
#w-downlink i {
line-height: 42px;
font-size: 24px;
color: #fff;
display: block;
width: 24px;
margin: 0 auto;
margin-top:10px;
}
#w-downlink {
height: 60px;
width: 60px;
background-color: #191919;
background-color: rgba(20, 20, 20, 0.4);
position:absolute;
bottom:0;
margin-bottom:30px;
right:0;
margin-right:20px;
cursor: pointer;
-webkit-transform: translate3d(0, 0, 0);
opacity: 1;
}
.w-downlink:hover {
height: 60px;
width: 60px;
background-color: #191919;
background-color: rgba(20, 20, 20, 0.4);
position:absolute;
bottom:0;
margin-bottom:30px;
right:0;
margin-right:20px;
cursor: pointer;
-webkit-transform: translate3d(0, 0, 0);
opacity: 0.5;
}
This should achieve most of what you would like; you don't need jQuery.
There's a button anchored to the top of the page and it changes when you start to scroll; this is simply CSS position: fixed;
The JS simply listens for a scroll event on the window object.
I've just edited it to also change back once the user scrolls back up the page by adding an if(){} statement to check for vertical scrolling.
Instead of just dumping a string into the inner HTML like I've done here, you could dump a different element into the div.
Look into the CSS transitions if you want your element to fade.
You could either change it's class when the scroll event starts, or do it all with javascript.
Here are some resources that may help from the W3C:
onscroll event documentation
css3 Transitions
var downLink = document.getElementById('down-link');
window.addEventListener("scroll", function(){//Provide a window listener
if(window.scrollY){
downLink.innerHTML = "Back to Top";
}else{
downLink.innerHTML = "Down Link";
}
});
#down-link {
position: fixed;
top: 0;
left: 0;
border: 2px solid black /*Just to show the element bounds*/
}
#userScrollElement {
max-height: 500px;
height: 800px;
overflow: auto;
}
<div id="userScrollElement">
<div id="down-link">Down Link
</div>
</div>
Related
So here is a simple fiddle (http://jsfiddle.net/t1xywroc/2/) I created to show you the animation I'm trying to replicate (from this website: https://paperpillar.com/).
I'm still fairly new to Javascript/Jquery and have only been doing HTML and CSS for a couple months.
The problem about my animation is that (as far I know) there is no transition from an absolute position to a fixed position, which I believe causes that small jump, right after triggering the animation (or transition if you will). The second problem is, that the content of the ::before element can't be transitioned either. How can I fix these things using jQuery?
I tried to get it work by using mostly CSS but I keep coming across new problems. I guess it's inevitable to use JavaScript, which is what I need help with. I'd really appreciate it.
Note: not a native speaker.
HTML
<div class="section">
<div class="button"></div>
</div>
CSS
.section {
height: 2000px;
width: auto;
}
.button {
position: absolute;
transform: translateX(50%);
right: 50%;
display: inline-block;
color: white;
line-height: 60px;
height: 60px;
width: auto;
padding-left: 25px;
padding-right: 25px;
background-color: blue;
border-radius: 25px;
vertical-align: middle;
top: 15rem;
}
.button::before{
content: 'Button Text';
}
.floating {
padding-left: 0px;
padding-right: 0px;
position: fixed;
right: 15px;
top: calc(100vh - 120px);
transform: none;
height: 80px;
width: 80px;
transition: all 1.5s ease-in-out;
background-color: red !important;
border: none;
border-radius: 50%;
justify-content: center;
text-align: center;
}
.floating::before{
content:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24px' height='24px' fill='white'><path d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z' /></svg>");
}
JS
$(document).ready(function() {
$(window).on('scroll', function() {
if ($(window).width() <= 768) {
var scrollTop = $(this).scrollTop();
$('.button').each(function() {
var topDistance = $(this).offset().top;
if ((topDistance - 30) < scrollTop) {
$(this).addClass('floating');
// Haven't put much thought into this part yet
} else if ((topDistance - 30) >= scrollTop){
}
});
}
});
});
A couple of problems have been highlighted in the question: the 'jump' when the transition moves between absolute and fixed and the fact that pseudo elements' content can not be transitioned.
To get round the absolute to fixed jump problem we can set the button to fixed as soon as the transition is to start and then transition. This is possible by introducing CSS animations rather than transitions.
To appear to transition between content we use before pseudo element to hold the initial text (as in the code given) and introduce an after pseudo element that holds the svg. To give the appearance of transitioning between the two we animate opacity.
Note: in the website which is to be emulated the button initially has a white background over the page's white background. This means the change in shape as the initial button fades away is less obvious. With a contrasting blue background the change in shape is much more obvious. That may or may not be the effect required.
Here's a snippet with animations instead of transitions and moving to fixed immediately the animation starts.
$(document).ready(function() {
$(window).on('scroll', function() {
if ($(window).width() <= 2500) {
var scrollTop = $(this).scrollTop();
$('.button').each(function() {
var topDistance = $(this).offset().top;
if ((topDistance - 30) < scrollTop) {
$(this).addClass('floating');
} else if ((topDistance - 100) >= scrollTop){
}
});
}
});
});
.section {
height: 2000px;
width: auto;
position: relative;
}
.button, .button::before, .button::after {
animation-duration: 1.5s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;
position: absolute;
}
.button {
transform: translateX(50%);
right: 50%;
line-height: 60px;
height: 60px;
width: auto;
color: transparent; /* do this to ensure the button has dimensions so it can be clicked */
display: inline-block;
vertical-align: middle;
top: 15rem;
}
.button.floating {
position: fixed;
top: 30px;
animation-name: floatdown;
}
.button::before {
content: 'Button\00a0 Text';
opacity: 1;
color: white;
line-height: 60px;
height: 60px;
width: auto;
padding-left: 25px;
padding-right: 25px;
background-color: blue;
border-radius: 25px;
}
.button::after {
content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24px' height='24px' fill='white'><path d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z' /></svg>");
opacity: 0;
padding-left: 0px;
padding-right: 0px;
height: 80px;
width: 80px;
margin-left: -50%;
background-color: red;
border: none;
border-radius: 50%;
justify-content: center;
text-align: center;
}
div.button.floating::before {
animation-name: fadeout;
}
div.button.floating::after {
animation-name: fadein;
}
#keyframes fadeout {
100% {
opacity: 0;
}
}
#keyframes fadein {
100% {
opacity: 1;
}
}
#keyframes floatdown {
100% {
top: calc(100vh - 120px);
right: 95px; /* 80+15px */
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section">
<div class="button">Button text</div>
</div>
Note also that if you want the downarrow to fill the circle more you could put it as a background-image with size contain rather than as content.
I've been following along on a Youtube tutorial cloning the Microsoft website. I've been doing good so far but now I'm literally 30 seconds away from the tutorial ending, but I can't figure out why my hamburger menu isn't showing. Basically, once your screen width is < 700px, the nav bar moves off the screen to the side and a button on the top right appears to toggle, but when I press the button, the menu doesn't come back over if that makes sense.
CSS code:
.main-nav ul.main-menu {
display: block;
position: absolute;
top: 0;
left: 0;
background: #f2f2f2;
width: 50%;
height: 100%;
border-right: #ccc solid 1px;
opacity: 0.9;
padding: 30px;
transform: translateX(-500px);
}
.main-nav ul.main-menu li {
padding: 10px;
border-bottom: #ccc solid 1px;
font-size: 14px;
}
.main-nav ul.main-menu li:last-child {
border-bottom: 0;
}
.main-nav ul.main-menu.show {
transform: translateX(-20px);
}
JavaScript:
<script>
document.querySelector('.menu-btn').addEventListener('click', () => document.querySelector('main-menu').classList.toggle('show'));
</script>
"main-menu is not the correct selector in this case. Use .main-menu for class name selector."
I have a simple Dropdown and a sticky container to the right. The dropdown keeps going behind the sticky container as such:
I tried:
changing the right container to position fixed
changing z-index of both divs
However, these did not work. This is my codepen
The dropdown with position absolute is article-actions-dropdown-content
The sticky container is right-sidebar-container.
Sticky element:
.right-sidebar-container {
height: 550px;
width: 98%;
background-color: red;
display: block;
margin-left: auto;
margin-right: auto;
top: 20%;
margin-top: 10px;
position: sticky;
margin-bottom: 20px;
transition: 0.5s;
}
Absolute element:
.article-actions-dropdown-content {
position: absolute;
background-color: #fff;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
min-width: 160px;
overflow: auto;
border: 1px solid #ebebeb;
border-radius: 4px;
opacity: 0;
transition: opacity 0.1s ease-in;
overflow: hidden;
visibility: hidden;
}
Try adding z-index: 1 to the element with class article-actions-dropdown-wrapper.That is,
.article-actions-dropdown-wrapper{
z-index: 1
}
tried on your codopen, the dropdown menu is nested inside the wrapper that is nested already, just apply the z-index:1000; on the .article-actions-dropdown-wrapper and z-index:0; on .right-sidebar-container
z-index use to start the unit count of a nested element 100 or 10 (don't remember) unit less compared to an higher one then you have to insert higher numbers
You should take z-index:1 for the class .article-actions-dropdown-content because it will prioritize the sticky menu.
here I have a little problem I have a little level in javascript and I would like the page of my portfolio to scroll horizontally from a place in the dom how should I do it is a can complicate putting everything I did here is my portfolio:
https://portfolio-rdw.000webhostapp.com/
For you to see what I want but I want to do it in javascript vanilla no jQuery or others just Js and here is the css code to successfully do this:
(sorry for my English I am French)
#container .box {
width: 100vw;
height: 100vh;
display: inline-block;
position: relative;
}
#container .box>div {
width: 100px;
height: 100px;
font-size: 96px;
color: #FFF;
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;
line-height: .7;
font-weight: bold;
}
#container {
overflow-y: scroll;
overflow-x: hidden;
transform: rotate(270deg) translateX(-100%);
transform-origin: top left;
background-color: #999;
position: absolute;
width: 100vh;
height: 100vw;
}
#container2 {
transform: rotate(90deg) translateY(-100vh);
transform-origin: top left;
white-space: nowrap;
font-size: 0;
}
.one {
background-color: #45CCFF;
}
.two {
background-color: #49E83E;
}
.three {
background-color: #EDDE05;
}
.four {
background-color: #E84B30;
}
You can use scrollIntoView function on a DOM element to scroll to it.
I took a look at your site structure and you can do something like below.
Just keep in mind to give each link the href attribute linking to the section id.
const navbar = document.querySelector('.navbar-nav');
navbar.addEventListener("click",function(e){
if(e.target.tagName==="A"){
e.preventDefault();
try{
const href = e.target.getAttribute("href");
var section = document.querySelector(href);
section.scrollIntoView({behavior: "smooth"});
}catch(e){
console.log(e)
}
}
})
Hope this helps!
in fact I expressed myself badly I want my portfolio to scroll vertically and arrived at the section 'Experiences' that it goes horizontally when I scroll as with the css below but I want to do that with js only thank you for to have taken time anyway.this is not at the "click" event but by scrolling that it changes in the "Experiences" section thank you
I have a semi-circular div, which will have some content. It will be rendered but not visible to start with (using Angular 2). On a certain user action, hovering over another section of the screen, the div will appear, but I don't want to just use display:none/block, or hidden.
What I'm trying to do is have another div with similar css act as a mask and slide up to reveal the semi-circle div.
I have tried numerous ways, and it would be of no advantage to post that code here. I have animated it by changing it's position so it moves into view, but it seems like a ridiculous way to do it.
<div class="semi-circle">
<button class="add-button" >Add</button>
</div>
.semi-circle{
height:80px;
width:160px;
border-radius: 90px 90px 0 0;
-moz-border-radius: 90px 90px 0 0;
-webkit-border-radius: 90px 90px 0 0;
background:green;
}
.add-button{
position:absolute;
left: 65px;
top: 50px;
}
This is basically what it will look like
You can achieve this effect in CSS alone, with an ::after pseudo-element and a transition:
.semi-circle {
position: relative;
display: inline-block;
width:160px;
height:80px;
background-color: rgba(0,0,0,0);
border-radius: 90px 90px 0 0;
overflow: hidden;
}
.semi-circle::after {
content: '';
position: absolute;
display: block;
top: 80px;
left: 0;
width:160px;
height:80px;
background-color: rgb(0,255,0);
border-radius: 90px 90px 0 0;
transform: translateY(0);
transition: all 0.75s ease-out;
}
p {
display: inline-block;
width: 160px;
text-align: center;
}
p:hover ~ .semi-circle::after {
transform: translateY(-80px);
}
<p>Hover me</p>
<div class="semi-circle"></div>