For my website I need an image with text scroll. An example can be found here: https://nyetimber.com, at the 'Our wines' section.
How do I build something like this?
Side question: how do I find out how the wine company did this on their website? Is there an easy way to do so with element inspector, perhaps?
Thank you in advance.
you are asking about parallax scrolling effect. It can be applied for both images and text. There's no direct answer for your question, because you didn't upload any code sheet, but you can read more about this effect here:
https://www.w3schools.com/howto/howto_css_parallax.asp
https://medium.com/#dailyfire/pure-css-parallax-simple-tricks-da102d0ffdb9
https://alligator.io/css/pure-css-parallax/
Answer for you second question is that you can use your browser inspect (developer tool) and see the plugins/code that has been used.
Related
I am trying to make a single page from a psd file where the nav bar is fixed, and the background of each div is always full screen, the screenshot is http://2.s3.envato.com/files/50797146/01_preview01.jpg ANY HELP? :S
Why am I not allowed to comment ?
Well this is not a we do it for free page. I think this question is off topic. If you have a direct question with a well descriped problem, edit your question to it.
I have received a table-html designed site to complete it. Now I have encountered a problem and need your help. Would it be possible for you to see why the top right image is not displayed completely? I have tried a a lot and found nothing.
Here is the link to homepage:
http://myperfume.ir/
Here is the link to full image so that you can see how much it is clipped:
http://8pic.ir/images/03017006756162873819.jpg
Thanks
The image that is being used as the row's background is this:
http://myperfume.ir/images/2_02.png
Which is already clipped, so you'll need to change it.
Your best bet would be to recode the entire website without using tables. You are going to have all kinds of headaches with this structure.
This question already has answers here:
Closed 10 years ago.
We have a picture on Our website how can i prevent other users cant download this picture ?
is it possible or not ? if its not possible please give some ways to make harder the way of copy a picture
If you really want to prevent someone from stealing a picture, someone refer to someone that is bad with technology, here's some technic :
Place the image as CSS background instead
Put a transparent DIV over the image.
Disable right click
Watermark all your image
Disable direct image access
Use .htaccess to allow only your website to access your image
Embed the picture using flash or something similar
Consider this : what is on the Internet will be and always be "free" to every "thief".
EDIT Here's a technic used to convert torrent inside a PNG : http://stegtorrent.sourceforge.net/ You could do the reverse if your the FBI ! :) Store your image inside a diffrent type of file.
The user can copy it one way or another. One interesting way though is to use images as CSS background that makes it it a little harder than right click and save image.
<div style="background-image:theimage.png ;"></div>
But to the determined user there is not much you can do. when you share an image just assume someone will copy it. Otherwise don't share it.
Add this script to the body tag. This will disable the right click from which save is called.
Have a look at this post on stack overflow Disable mouse click outside cropped region
I really like what this website has done with their CSS layout. Is there any tutorials anyone can point me to/an explanation of the layout - particularly how to get those smaller linked images to line up over the larger image. I'm a bit new to design. Let me know.
Site: http://www.fssjax.org
Thanks
Download Firefox's Web Developer Add-on and Firebug. (Chrome has something similar - likely other browsers do too).
After you install them, visit the page in question, and click Outline -> Outline Current Element. This will make it so anything you rollover will show you a red border around it - which will help you understand all the parts that make up their page.
Then, right-click on an element and click Inspect Element (at bottom of pop-up options). This will show you the HTML on the left and the CSS on the right - the perfect way to learn how they're laying out their page.
Download Firebug for Firefox, it allows you to easily inspect elements on a web page and see their css etc. Chrome also has a bult-in inspector.
Inspect an element, look at the css then Google to find out what the css does if you aren't sure.
Well ok, it's kind of a crap navigation though...
Anyway, the nav is built using the float (http://www.w3schools.com/css/css_float.asp) attribute. Two elements (the containers) are placed sequentially, then the first (the nav) is floated to the left of the second. There's also usage of the position (http://www.w3schools.com/cssref/pr_class_position.asp) attribute to move it over the picture.
And like the others said, use Firebug to figure out what everything is doing.
Hi I have been trying to trying to hide a portion of image for my blog. Basically what I would like to do is to have images of different sizes (or same width but different heights) on my blog's single post page. But on the main page of the it should show only a portion of it, the size of the visible image should be same for all the images.
I hope the above is clear, just in case I the above explanation is not clear here is a site that works on similar way http://www.creativeapplications.net/
Now I could not get if it's done using CSS or some sort of Javascript.
Could you guys help me to understand it and achieve similar image effect.
Thank you
Takias
You want CSS' clip property: http://www.seifi.org/css/creating-thumbnails-using-the-css-clip-property.html