I have multiple images & I used only one image tag, and I am changing image source using useState on scroll event in reactjs, now I am trying to give style for every single source of the image, like zoom-in and zoom-out, so how can I make this.(first image)bulb image
(second shade image)
you can see the images I have three images single bulb, one shade, and two shades around the bulb so whenever you scroll down the page bulb will light up with the shade, first one shade and then the second shade around the bulb, so now I want to give the style for every shade of bulb. like shade will appear with zoom-in from the bulb
Related
I have a question about a slider that I need to make with Bootstrap 3.3.1. I would like to make an image slider with texts and 3 buttons hovering and centered over those images. So far so good, the tricky part is that I would like the text and buttons to remain still as the images slides (if that makes sence?) because the text is basically the same for the most part.
There is just a little part of the text that actually needs to be changed with the image/slide.
Exemple: The moon is red (red image behind), The moon is blue (blue image behind) (Only the word "red" and "blue" changes in that sentence but the rest doesn't fade or swipe with the image.)
How can I make this possible? and responsive.
Thank you,
I'm running out of ideas.
Link to the folder
there are so many JQuery files and JS that I thought it would be easier to share the folder.
I am usually a back-end developer that tries to become fullstack and I came to a little problem.
What I want to do is have a button that on click slides to the other side and changes the background. I am familiar with how to make an event on click and actually change the background. My problem is how to make the CSS so it looks good.
Lets say I have black and white themes. I want to have a box with white and black sides. When I click on it I want one of the sides to shift.
Here is how I want it to look.
The idea is to click on the box and the black part to move. Basically the white part is the background and the black part is the button that slides with some animation. Then the black part switches its color to opposite of the current background.
Basically the colors just swap but with cool sliding animation.
I know that I need one div for the box with background the current background.
I also know that I need another div to be the actual part that moves with background opposite of the current one.The inner dif will have a button inside of it that on click will call the function that changes the background.
What I can do so far is
<div class="box">
<div class="slider">
<button onClick="changeBackGroundColor()"></button>
</div>
</div>
The slider div will have half the width of box and full height of box.
Now comes the tricky part - how can I add if in css so that I can always check what is the current background and make the background of slider the opposite of the current one?
Also - how can I make it slide to the border of the box? I need to make the sliding in both directions. From right to left when the theme is white and from left to write when its black.
I have a psd file with layers that is a mockup of a web page I need to create. You can view a page scheme here. For each page element (header, menu, main body, footer, etc) there are layers in the psd file. There are also some rounded images with drop-shadow that also constitute layers and they overlap among themselves, as well as the main body text area and the header of the page, as you can see in the page scheme.
My question is, what would be the correct method to export slices for using the exported images in the page markup:
Option 1: Export the rounded images as layer-based slices (after I turn off any other layers below them) and use transperency attributes for the images.
Option 2: Export rectangular user-slices that contain a page part (eg, main body) and the parts of the rounded images that overlap this page part.
For example, in the 1st case, I would export all 3 rounded images as a layer-based .png slice (after I turned off the header and main-body layers), ending up with the 3 images with transparency. Then I would place this image with absolute positioning, so it overlaps the main-body and header.
In the 2nd case, I would slice the whole header part with the part of the img1 that overlaps it, then I would slice the menu, then I would slice the main body part, including the parts of the images that overlap it, then I would cut another slice to the right, containing the rest of the images' parts and so on. If you go to this link and click on the template thumbnail, you could check with Firebug a similar approach to the 2nd option, regarding the floating images on the upper left of the page.
Option 1 is the way to go. With option 2, a design change or repositioning of the circles requires you to re-slice everything again.
In CSS I can set multiple background images to appear one after another using the background: attribute, but when these images appear on the page there is no transition and the edge between them looks quite ugly. Is there a way to implement a shadowed border line between two consecutive backgrounds?
e.g.
#main-body{
background: #222222 url(background.jpg), url(background2.jpg);
}
This code will set two images to the background, when one image ends as you scroll down the page the next one immediately begins. There is no visual transition between the two, it's just two images one after another and doesn't look visually appealing.
The best way to handle the situation here is to draw borders on the top and bottom of your image with desired color and desired width. You can use any image editor to do this and this will also make your task simpler.
Background behind button should be like block background. Button can change its width.
How I can realise this?
This might be done in a lot of ways, here's just my first idea:
Use a mask like this:
Make sure your background-image covers the whole button
Insert two white divs above the background-image: left & right of your button
Insert a Mask like the above as the buttons background
Due to the transparent area (indicated by the texture) you are able to display a border-like part of your background image while the rest of it stays invisible, because its overlapped.
I illustrated the result of the instructions above