I am trying to do the curvy background shape divider animation when scrolling on this website (https://crazyabouteggs.com/en/) but I am not sure how.
Does anyone have an idea how this is achieved? Thanks!
**Edited
I have included the image of the divider that I meant here. I'm not sure what it is called in professional term as I did not receive any classes or learn of it before, just learning on my own. I would love to know how the divider curves only when we are scrolling and return to normal when we are not.
[1]: https://i.stack.imgur.com/4ypAS.png
Related
I need some help as I am very new to coding. I am trying to design a website with a Website Builder (Homepage Baukasten) and I had to rotate a line through code as you can see on the image. The problem is now that I don't know how to transform its border (the white horizontal square) so I can place it where its supposed to go. I looked around to found a way but I did not found anything that did the job.
Thank you for your time and have a nice one!
I'm pretty new to SVG and how to work with them. I am not asking you for answer code, what I am asking is for some guide on maybe some plugin, maybe an article or some advice on how do I go about animating this SVG the way I wish to.
Problem:
I want to animate the picture below of the Sun, I'll be creating a vector graphic of this image obviously but what I want is these cuts in the bottom part of sun to animate and go from top to bottom revealing the background and second sun behind the main sun.
I want to do this inside a webpage so I need help regarding that.
Like I am not able to figure out how would I go about the whole process of making these cuts going down. Any help would be highly appreciated.
I would try https://rive.app/
As far as the how, I would create a short infinite loop. The horizontal bars would probably need to be their own shapes with some kind of masking effect on them to knock out the circle. You'd have to tween them to move up on the Y axis and let the height shrink to nothing as it moves up. The animation would probably only be 250-750ms. Let me know if that works!
I have a question regarding a simple tumblr theme I'm trying to make.
I've never really done a theme before and can't find specific information on what I'm trying to do.
I need to get the sidebar links to be links that you can hover over, and also be able to space the "About" from the main text without having to put white text beneath.
I also need to space the bottom of the posts with the bottom of the page more, because as you can see there's space at the top but not the bottom...
The last thing is that I need to get infinite scroll on my page so there's no need to change pages.
How do I get the sidebar and every post to be slightly bordered, the same color as the lines on the background?
I know that these are very simple questions, but I'm new to this and confused. Thanks so much!
The website name is jake-bellissimo.tumblr.com
And the code is:
http://pastebin.com/FeHSKSdu
Thanks so much!
I confess I've never made a tumblr theme, but it looks like it's some basic CSS that you need.
:hover pseudo selector and padding (box model)
Again, look at padding/margin (box model)
Infinite scroll implementation will require some custom javascript and server side code. Not sure if tumblr supports this.
Borders are also achieved with the css border property border
You'll probably need to read up on CSS before you try making a theme for tumblr. Again, I'd recommend the articles on Mozilla developer network
I have been at this for 10 hours straight, I have tried different types of positiong, but it's just not working. I can't replicate this interesting effect where you scroll down the page and the navigation changes from a transparent background, to a white background. The example can be found at http://www.bakkenbaeck.no/ Can anybody point me in the right direction?
TL;DR This effect is accomplished with not only HTML and CSS but also needs some JS to pull this one off.
I am guessing a little bit as to what you are referring to specifically on that example you gave but I will assume for this post that you are referring to the change that happens once the user scrolls down past the initial full height image where you see the logo change from white to gray and the background of this nav area turns white.
Not knowing your skill level/knowledge its a bit tough to make assumptions about what is going to give you direction, but I'll try my best. What is happening here is the creative use of CSS z-index, some javascript, and duplicate menus. If you think of a web page as a stack of paper, then the first piece of paper is the menu which is on top of the second page, the opening image, then the third page, the the next (duplicate) menu. The duplicate menu is positioned exactly under the first menu. As you scroll down you remove that middle image layer and the new navigation is exposed via some JS. There is a page scroll event listener (javascript) that is checking where the page is currently scrolled to. Once the user reaches the point where the logo and navigation need to start changing, the javascript kicks in and starts to set the height of the first navigation to 1px smaller for every 1px past the scroll point you've gone all the way until it gets a height of 0px effectively hiding it. If you take a look inside of chrome web tools by inspecting both navigations, you can see this happening (the height of the navigation shrinks) as you scroll.
I can see that the site is using http://pagescroller.com/ which is probably the plugin they are using to trigger the height adjustments I was describing.
Hope that gives you some direction!
Reaserch Paralax scrolling if you not familiar with js there are numerous tutorials online and you will find it very easy if you follow them step by step here are some that I have used:
http://www.impressivewebs.com/parallax-scrolling-scripts-plugins/
It's really easy don't let jQuery intimidate you there is plenty examples on google!
I've been learning a bit about canvas and something that caught my attention (mostly because i had no idea how to do it when i saw) it's the shine and the nice animation that google did in their logo here:
http://www.google.com/chromebook/
I would like to know if someone have any idea or know how to do it =]
Thanks
You should definitely see the other discussion here:
How to create a shiny logo like Google Chromebooks website
It wouldn't be hard to make yourself, simply consider having a canvas with an css background-image on it and all you need to do is start an animation on the mouseover event.
The animation draws a radial gradient with a radius that increases over time, then it draws a line that is affected by a linear gradient that moves from left to right.
If basic animation on the canvas itself is something new to you then I suggest you do a search for online tutorials about canvas animation.