Hacking away at building my own website, want to dive deeper - CSS-Tricks

This topic is empty.

Viewing 10 posts - 1 through 10 (of 10 total)

Author

Posts
March 21, 2016 at 3:00 am #239644

djhpht
Participant

Disclaimer; I’m a photographer, not a web designer. I read a lot about web design and carve out little tricks here and there to make my web page work, mainly because I’m not a fan of template websites, and I’m a control freak. So to make this simple, or at least try, this is my current site; djonathanhutchings.com. I am using a couple css codes I’ve found here and other places to 1) have my splash page image (background image) auto fit with proper aspect ratio to browser window, and 2) place my navigation header at the top of the page and be consistent throughout the rest of the site.

What I want to change: I don’t like that all the rest of my pages are simply html and frame sets for my images. I’d like to be a bit more dynamic and I know it can be accomplished with some css trickery, see here RVLT.com.

Mainly, the vertical scrolling into fully auto resizing, with correct aspect proportional, images beneath the ‘splash’ page opening.

Does this make sense to anyone? Or am I biting off more than I can chew? Pointing me in the right direction and letting me hack away will be fine, I’m used to it.

Thanks to anyone who is willing to help, or tell me I’m in over my head!

March 21, 2016 at 3:12 pm #239662

Shikkediel
Participant

I’m having trouble understanding the question exactly…

March 21, 2016 at 7:25 pm #239666

djhpht
Participant

I guess my question is can I have a dynamic, vertical scrolling site, instead of a header that links to several other pages. I’d like to be able to have all the images, or containers with the images, proportionally scale to the browser window when scrolling vertically, to, essentially, keep the ‘splash’ page as is, loading as it does with a full browser window image and my logo, then scrolling vertically to reveal more images. And can this be accomplished with some CSS?

March 21, 2016 at 8:08 pm #239667
Shikkediel
Participant
Making an image fullscreen and showing it completely the same for all aspect ratios is virtually impossible. But this is usually as good as it gets :
```
mydiv {
background-size: contain;
}
```
It will require an image that has a fair amount of “free space” at the edges, of which it would not really matter if it’s fully showing or not. With different aspect ratios, either a bit of the top and bottom or the sides will not be showing.

I would make a div with these dimensions for it, then probably position the header absolutely on top to avoid having to use calc(), which isn’t very well supported on Android:
```
mydiv {
height: 100vh;
}
```
For a parallax effect like on the other site, you’ll be needing JavaScript.
March 22, 2016 at 10:56 am #239694

djhpht
Participant

Thanks for the info. I’ll place this into my page and see what I get, appreciate the help.

April 5, 2016 at 5:47 pm #240261
djhpht
Participant
Okay, so I’ve doing some trial and error and now I’m on a bit of different path now. Still wanting the, somewhat, same thing, but now horizontally. I’ve discovered how to get images to display vertically, full screen and auto resize to different size browser windows with this coding (note: did not paste the java script for the parallax or the end tags for the body):
```
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>

        <style type="text/css">
            body {
                margin:0;
                padding:0;
            }
            ul {
                margin:0;
                padding:0;
            }
            ul li {
                list-style:none;
                overflow:hidden;
                height:700px;
            }

            .parallax-background {
                height:800px;
            }

            .frame1 {
                background-image:url('JS2.jpg');
                background-size:cover;
                background-position:50% 30%
            }
            .frame2 {
                background-image:url('BR1000.jpg');
                background-size:cover;
                background-position:50% 50%
            }

            .frame3 {
                background-image:url('whiskey1a.jpg');
                background-size:cover;
                background-position:50% 70%
            }

            .frame4 {
                background-image:url('ona1000.jpg');
                background-size:cover;
            }
        </style>

</head>

<body>

        <ul class="parallax">
            <li>
                <div class="parallax-background frame1"></div>
            </li>
            <li>
                <div class="parallax-background frame2"></div>
            </li>
            <li>
                <div class="parallax-background frame3"></div>
            </li>
            <li>
                <div class="parallax-background frame4"></div>
            </li>
        </ul>
```
I’m curious how to get them to be displayed horizontally with the same dynamics, full screen and resizing automatically to fit the browser window.

Any suggestions on how to recode this? Will not be using the parallax for these pages, only to showcase images in a horizontal scroll.

Thank you!
April 5, 2016 at 10:34 pm #240264

Beverleyh
Participant

Looks like the ‘sweep left’ demo here might fit the bill http://fofwebdesign.co.uk/template/_testing/sweep-in-news-scroller.php

Have a look at the supporting blog post for simplified markup (very similar to yours) and an explanation of the JavaScript (which sequentially adds and removes a class to each item in a list) and CSS (for the sweeping animation once the JS class is applied) http://www.dynamicdrive.com/forums/entry.php?321-Simple-Sweep-in-News-Scroller-(CSS3-JS)

And play around with the sizing of the container(s) to make it full screen.

April 6, 2016 at 5:32 am #240281

djhpht
Participant

Hi Beverly, thanks for responding. This isn’t really what I’m looking for. I actually just want my images to display and scroll horizontally. With the code I posted I can get them to display and scroll vertically, but horizontal is what I’m looking for.

Any thoughts?

Thanks

May 1, 2016 at 8:58 am #241125
djhpht
Participant
Okay, so figured out how to get my images horizontally as I want them. But now when resizing the browser, if I make the viewport widow larger, my images wrap as if text in a paragraph, and when the window is smaller there is a ridiculous amount of white/negative space created at the end of the scroll by my pixel width being set to the total width of my images. Link to actual page is below with the code also, take a look and drag the window larger and smaller and see what I mean. How can I get the images to stay in line and not have the negative space when smaller and not wrap when larger? Is there css than help with this? Any help is greatly appreciated!!

Thanks in advance!

Link to actual html page here: http://djonathanhutchings.com/NEWTEST/black&white.html

Code here:
“`
<!doctype html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Black & White</title>
<style type=”text/css”>
body {
margin:0;
padding:0;
}
#container {
position:absolute;
}
```
#images_hz {
    width:12584px;
    border:0;
    padding:0;
    overflow:hidden;
}

#images_hz img {
    height:100vh;
    display:inline;
    float:left;
 }

 img {
     pointer-events:none;
 }
```
</style>
</head>

<body>
<div class=”container”/>
<div id=”images_hz”>
<img src=”fashionb&w/1Ashten_7.jpg”/>
<img src=”fashionb&w/2Ashten_13.jpg”/>
<img src=”fashionb&w/3Ashten_6.jpg”/>
<img src=”fashionb&w/4blacktank3.jpg”/>
<img src=”fashionb&w/5blacktank2.jpg”/>
<img src=”fashionb&w/6blacktank1.jpg”/>
<img src=”fashionb&w/7blacktank5.jpg”/>
<img src=”fashionb&w/8blacktank4.jpg”/>
<img src=”fashionb&w/9katelyn1.jpg”/>
<img src=”fashionb&w/10katelyn2.jpg”/>
<img src=”fashionb&w/11jillian2.jpg”/>
<img src=”fashionb&w/12jillian1.jpg”/>
<img src=”fashionb&w/13jenny6.jpg”/>
<img src=”fashionb&w/14anger4.jpg”/>
<img src=”fashionb&w/15anger3.jpg”/>
<img src=”fashionb&w/16ona.jpg”/>
</div>

<script type=”text/javascript” language=”javascript”>
var message=”Sorry, right-click has been disabled”;

function clickIE() {
if (document.all) {
(message);
return false;
}
}

function clickNS(e) {
if (document.layers || (document.getElementById && !document.all)) {
if (e.which == 2||e.which == 3) {
(message);
return false;
}
}
}

if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown = clickNS;
} else {
document.onmouseup = clickNS;
document.oncontextmenu = clickIE;
}

document.oncontextmenu = new Function(“return false”)
</script>
</body>
</html>
May 1, 2016 at 10:33 pm #241148

I.m.learning
Participant

Add this to your header for responsiveness:

<!DOCTYPE html><html lang=”en”><head><meta charset=”utf-8″><meta http-equiv=”X-UA-Compatible” content=”IE=edge”><meta name=”viewport” content=”width=device-width,initial-scale=1″>

Check into Bootstrap Carousel for images

You may need to link to other sites for other codes
Author

Posts

Viewing 10 posts - 1 through 10 (of 10 total)

The forum ‘CSS’ is closed to new topics and replies.