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
Related
I have two divs like so and they are placed in the footer of my website :
divs in question
And here is my code :
.upNextCard{
/* Rectangle 68 */
position: absolute;
width: 214.29px;
height: 255.69px;
margin-left:300px;
margin-top:139px;
background-color:#E0B21C;
transform: rotate(-12.08deg);
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
transition: 0.5s;
pointer-events: visible;
}
.upNextCard:hover {
margin-top: 120px;
}
.upNextBanner{
/* Rectangle 69 */
position: absolute;
width: 65.31px;
height: 47.17px;
background: #FE9C9C;
transform: rotate(-12.45deg);
margin-left: 400px;
margin-top: 98px;
pointer-events: visible;
}
Is there a way I can trigger both by hovering over the big box?
Yes, just chain them for a hover on the big box.
.bigbox:hover .upNextBanner{
Etc....
}
.bigbox:hover .upNextCard{
....
}
It would be easier if you post you html code to see the relation amongst divs
look at this https://www.w3schools.com/css/css_combinators.asp
it may help you
What's the best approach to achieving a lasting effect like in this gif?
I thought the framer-motion whileHover attribute would be my best chance, but I misunderstood how it works, I thought its possible to enter from and to parameters like in CSS animation.
I want to reveal the 'footer' either while the cursor hovers on it or when reaching a certain viewport height.
What's in the gif was made with keyframes animation in css.
I'd appreciate any hint, guide, link to a video on how to build such things.
Thanks in advance
I believe that you can achieve that exact effect using CSS only. This is often preferable, since javascript would bloat your code and be slower to execute.
You can see a way of achieving this effect in this fiddle
Basically, you can use the "hover" pseudoclass to make the aesthetic changes, and then use the "transition" property to animate them.
In the fiddle above, this is the code that actually does the trick:
/* setting base styles for the footer element */
footer {
margin: 0 auto;
width: 200px;
transform: translateY(60px);
transition: width 1s, transform 1s;
}
/* having an inner child will give that "truncated border radius" effect you see in the gif */
footer .inner {
background-color: lightblue;
padding: 3em;
border-radius: 50%;
transition: border-radius 1s;
}
/* Make changes using the "hover" pseudoclass */
footer:hover {
transform: translateY(0px);
width: 100%;
}
footer:hover .inner {
border-radius: 0%;
}
Please be aware that the fiddle I posted is just a hint on how to build this component, but it still miss some features, like the handling of the footer text content itself (right now it won't work well if it's multiline) and accessibility.
See this solution using only css:
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: Segoe UI, sans-serif;
}
.container {
width: 100vw;
height: 100vh;
}
.container main {
width: 80%;
height: 400px;
margin: auto;
border-radius: 30px;
display: flex;
justify-content: center;
align-items: center;
font-size: 3em;
font-weight: 800;
color: white;
background: rgb(70, 100, 52);
}
.container footer {
width: 100%;
display: flex;
justify-content: center;
}
.container footer .expand {
width: 200px;
height: 50px;
background: royalblue;
border-radius: 40px 40px 0 0;
position: fixed;
bottom: 0px;
display: flex;
justify-content: center;
font-size: 1em;
color: white;
transition: 1000ms;
}
.container footer .expand:hover {
width: 100%;
animation-name: resize;
animation-duration: 700ms;
height: 150px;
border-radius: 0;
}
#keyframes resize {
0% {
height: 50px;
border-radius: 60px 60px 0 0;
}
50% {
height: 160px;
border-radius: 90px 90px 0 0;
}
100% {height: 150px;}
}
<div class="container">
<main>
this is your main feed
</main>
<footer>
<div class="expand">^^^</div>
</footer>
</div>
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 need to make a lightbox for pictures on this portfolio website. I have everything hooked up so the image goes to the original size when being clicked on, like a simple lightbox. But the problem I'm having is that the background behind the modal only goes down to the bottom of the viewport instead of going all the way to the bottom of the page. Let me know if theres any additional information I can provide.
Lightbox Problem
#overlay {
background: rgba(0,0,0,0.8);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: none;
text-align: center;
}
#overlay img {
border-radius: 4px solid white;
margin-top: 10%;
}
#overlay p {
color: white;
}
Change position to fixed like this:
#overlay {
background: rgba(0,0,0,0.8);
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
display: none;
text-align: center;
}
I'm trying to get a full page (with nav at the top, but I don't mind the background going underneath it) zoom-out effect. However, I want it to execute once all assets are loaded, as it is the first thing seen when the page is loaded. So I wouldn't want it being executed early otherwise it may not even be seen or just the end of it would be caught.
I have seen several examples but I've had problems with them:
Animating (with jQuery) the background-size property - this made the animation 'choppy' and I read somewhere it was probably because it was being run on the CPU rather than the GPU.
Demo: https://jsfiddle.net/njj43kz4/
HTML
<body>
<div id="front"></div>
</body>
CSS
html {
width: 100%;
height: 100%;
}
body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
#front {
position: relative;
top: 0;
width: 100%;
height: 100%;
opacity: 1;
background: #222 url("http://melleum.com/data/uploads/1/262040-1920x1080-wallpaper.jpg") no-repeat center center;
background-size: 110%;
}
JavaScript
$('#front').animate({ backgroundSize: '100%' }, 1000);
Using a setTimeout as shown in this previous question's answer: Slight background zoom on DOM load? - this worked smoothly, however I cannot get it working when I change the width and height values to 100%. The image starts oversized before zooming out, but the oversized view is shown. I want the fixed 100%x100% view, and no extra scaling visible. I tried overflow: hidden but that isn't hiding the overflow. You can see this is happening as the scrollbars are appearing and ruining the effect.
Demo: http://jsfiddle.net/eHAuh/15/
HTML
<body>
<div id="front" class="scaled"></div>
</body>
CSS
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
}
#front {
position: relative;
top: 0;
width: 100%;
height: 100%;
opacity: 1;
background: #222 url("http://melleum.com/data/uploads/1/262040-1920x1080-wallpaper.jpg") no-repeat center center;
background-position: 50% 50%;
overflow: hidden;
}
.animatable {
-webkit-transition:all 750ms ease-out;
transition:all 750ms ease-out;
}
.scaled {
-webkit-transform:scale(1.2);
transform:scale(1.2);
}
JavaScript
$(document).ready(function () {
$('#front').attr('class', 'animatable');
setTimeout(function () {
$('#front').removeClass('animatable');
}, 1000)
});
Any help would be great, and I hope the layout of this question is ok. I couldn't work out how to indent paragraphs without turning them into code indents. Thanks for reading and have a nice day.
Edit 1: The way this will execute when loaded is because the jQuery/JavaScript is in the $(window).load.
Edit 2: There was an answer suggesting to use keyframes, however these do not support IE9 and this would be preferable.
You can do it with css #keyframes if you want using scale
I have used pseudo class for adding background
/** after page has loaded*/
$(window).bind('load', function() {
$('#front').addClass('active')
})
html {
width: 100%;
height: 100%;
}
body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
#front {
position: relative;
top: 0;
width: 100%;
height: 100%;
opacity: 1;
overflow: hidden;
}
#front:after {
content: '';
width: 100%;
height: 100%;
position: absolute;
background: #222 url("http://melleum.com/data/uploads/1/262040-1920x1080-wallpaper.jpg") no-repeat center center;
background-size: cover;
transform: scale(2);
}
#front.active:after {
animation: animation 5s;
/* change the value 5s to what you want */
animation-fill-mode: forwards;
/* added so that it doesn't return to its original state which is scale(2)*/
}
#keyframes animation {
0% {
transform: scale(2);
}
100% {
transform: scale(1)
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="front"></div>
As per your requirements it looks like you require this
/** after page has loaded*/
$(window).bind('load', function() {
$('#front').animate({
width: '100%',
height: '100%'
}, 5000);
})
html {
width: 100%;
height: 100%;
}
body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
#front {
position: relative;
top: 0;
width: 200%;
height: 200%;
opacity: 1;
background: #222 url("http://melleum.com/data/uploads/1/262040-1920x1080-wallpaper.jpg") no-repeat center center;
background-size: cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="front"></div>
in css change
#front
position: fixed;
or for body add
overflow: hidden;