I'm new here and I didn't know where to ask this sort of question, so here's a go. I'm trying to build my new portfolio website, and I'm trying to make it so that in the background I have a cloud that moves from left to right on the screen in the top left hand corner and it wraps around the website when it goes off the screen. How would I go about accomplishing this?
I'm building my site on wordpress, and I'm using HTML5, JS, PHP and CSS3. I tried going about using the css3 #keyframes class to move the cloud, but it didn't work.
Here's a link to my site.
http://www.secret.irmattstenquist.com
Simila sites that do this :
http://vimeo.com/ <-- With the sun and the bottom footer.
http://jsanim.com/ might be a solution. Its a javascript library for animations and you can see on their site they like animated background clouds :)
Related
Currently, I'm browsing some pages and I found that there's a page where the design is very pleasing to me. So I'm trying to replicate it, but unfortunately that I can't figure it out due to my lack of CSS skills.
So here's how that page work:
Whenever the class is active, it'll hop up a bit (the page I'm looking at is using Swiper, too!)
But however, the Hop-up image will go out of the box of Swiper
And what I'm doing right now, there's a box just like that page, but the image or anything else if it's larger than the current box, it'll be cut. I can't make it go outside of the Swiper's box.
Here's how I'm currently doing it, I made a quick dataSample and then mapped it, get the current slide to have the active class, and then CSS it. Any help is appreciated, many thanks.
I've left comment on what I'm doing in the CSS at CodeSandbox.
Code: CodeSandbox - Trying to create Hop-up image using Swiper
I'm learning to create landing pages from good examples online. One thing I'm trying to replicate is the light background behind the words "Build fast, responsive sites with Bootstrap" on the bootstrap page (the angled graphic).
It's not obvious to me in looking at the page source how this is done in this example. Can anyone suggest or point to a good resource that would help me learn this concept?
My site is built with Bootstrap 4 currently and hope to be able to stay within that framework.
The background color can be easily solved by using
".bg-light" as the background color class.
The easiest way to solve the shape is to draw a rectangle, rotate it to the designated degree then position it in such a way it fits perfectly woth what you want, here you can use
".absolute top-0 left-0 translate-middle"
and such bootstrap classes. Read more on Bootstrap Positioning here
As for the rotation, the easiest way to solve is with Bootstrap Extension. it provides bootstrap classes for rotating html elements. Read the docs on the link above
What you are looking for is background: linear-gradient(...). Example background: linear-gradient(165deg, #f7f5fb 50%, #fff 50%); (It's what was used on the bootstrap site you referenced). You can learn more about it https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient()
I'm trying to replicate this (or something like it) on a Wix site:
https://www.dropbox.com/s/vvrddboc9me6g6t/RefractionImg.mov?dl=0
Or the "hello" in the top right corner.
https://www.andreburnier.com/
where the css:hover will distort the image, bending it towards the mouse.
I've seen a way to do it with Babel, but Wix doesn't have a plugin or access to babel.
I'm thinking a way could be something to do with an area map of the image with some sort of fish lens / skew() going on, but the
A push in the right direction would be much appreciated :o)
You can't do it with Babel. Babel helps you support old browsers, not create cool effects.
You should use BlotterJS. This is tutorial: https://www.youtube.com/watch?v=Ry7yksI595U
Not too knowledgeable on vector graphics but throwing together a website for a hobby and am using an SVG as a background image. Found a great image here that I'd like to use but I'd like there to be more whitespace above the mountains: https://www.svgbackgrounds.com/#flat-mountains
Is there an easy way to do this? I've been out of the web dev game for a bit now and simple searching lead me to "background-position:" and that pushes the image down but I end up with the bottom of my image coming down into the top of my screen. Is there an easy way to just add some whitespace here so that the mountains start a little lower?
Don't have the site live yet to show you or I would.
Thanks!
Im looking to create a landing page that emulates DropBox (in wordpress). I was wondering how they achieved the effect of clicking the play button that overlays the background box that then turns into a video?
I see from the source that they are using JW player but again no clue on where to start with this. Are there skins you can buy that allow this? Any ideas to lead me in the right direction are appreciated.
Thanks
Can be done easily with jquery and css. First, absolute position both divs centrally on the page so that when visible one is on top of the other, then set the video div css to "display:none;". Then you can use jquery to show the video and hide the play button on click, something like this:
$(function(){
$('#play-btn').click(function(){
$('#play-btn').hide();
$('#video').show();
});
});
Simply done mi amigo. Bare in mind they don't have to be centered, they just have to be positioned one above the other...