Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I am currently working with parallax effects on a website where i need a paragraph to go through halfway on the bottom of the page. But since the paragraph has to be responsive in font-size i am not quite sure if i need to convert the text into image or stick with pure text to solve this issue? It seems like a solution with images can enable me to do some tricks with pure JavaScript.
In general i feel it is very hard to control the text on the page especially for parallax where the text can appear in different positions. Maybe there are some good tools for this purpose?
https://jsfiddle.net/pt88w26u/2/
HTML:
<section id="first">
<div>
<p>This is a test</p>
</div>
</section>
<section id="second">
</section>
CSS:
html,
body {
height: 100%;
color: #fff;
font-size: 16px;
margin: 0;
padding: 0;
}
section {
min-height: 100%;
}
#first {
background-color: #000;
}
#second {
background-color: #ddd;
}
section > div {
top: 86%;
font-size: 5em;
position: absolute;
transform: translate(-50%, 0%);
left: 50%;
}
You can do this only with css.
To do this, set the position and transform of the div to
bottom:0px;
transform:translate(-50%,50%);
and remove the default margin on the p tag.
https://jsfiddle.net/pt88w26u/5/
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
When the user changes the square image to a circle image the border remains square. Is it any way to change the border to circle automatically?
If I understand you correctly, please try this approach:
HTML:
<div class="image-cropper">
<img src="your-image" alt="avatar" class="profile-pic">
</div>
CSS:
.image-cropper {
width: 100px;
height: 100px;
position: relative;
overflow: hidden;
border-radius: 50%;
}
.profile-pic {
display: inline;
margin: 0 auto;
margin-left: -25%; //centers the image
height: 100%;
width: auto;
}
It will circle your image perfectly as we have profile pic in social media.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I want to have a div that fades in when you have scrolled a certain amount of pixels, without using jquery, only using javascript.
Jquery is Javascript, so unless you loop a listener (for scroll) in JS to change something in the document object model, you will find yourself having to use HTML5 (css3 and some jquery), like this (From Codepen)
HTML
<div class="top"><div class="title">Fade Away</div></div>
CSS
body {
margin: 0;
height: 1000px;
}
.top {
margin: 0;
position: relative;
width: 100%;
background-color: #aaa;
height: 300px;
opacity: 1;
text-align: center;
font-family: 'helvetica';
font-size: 80px;
font-weight: 100;
color: #fff;
}
.title {
position: absolute;
top: 60%;
left: 100px;
}
JS
$(window).scroll(function(){
$(".top").css("opacity", 1 - $(window).scrollTop() / 250);
});
There are several pre-written parallax scripts you can use, like this one called skrollr, which will enable you to just add a reference to the JS file and then add CSS to your page code: https://prinzhorn.github.io/skrollr/
I hope that helps you get started!
To get the scroll position from top, you can use the document.pageYOffset property.
To fade something in, you have to use a setInterval, you can see it here:
How to do fade-in and fade-out with JavaScript and CSS
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I have been trying to display ajax loader/spinner image with transparent lightbox typed background in the whole screen. Any idea please.
Check these out:
http://codepen.io/collection/HtAne
Take one of the .loaders - put it in a #loaderContainer and then:
#loaderContainer{
position:absolute; // or fixed
background-color:rgba(0,0,0,0.6); //to your preference
width:100%; height:100%;
top:0; left:0; bottom:0; right:0; // not always necessary
text-align:center; vertical-align:middle;
//you'll have to tweak it to get it centered, but it shouldn't be too hard
}
A strategy I often use.
Make a containing div
Create a child div that will be fixed behind that is transparent
Create a sibling div that will have the loading animation as the background
The reasoning is that you can have the transparent lightbox with its own transparency and the loading gif will be at full opacity
css
.modal-overlay {
background: #000000;
opacity: 0.6;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=60);
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
#ajaxLoadingBox {
position: fixed;
top: 50%;
left: 50%;
height: 60px;
width: 60px;
background: #333 url('../img/loader.gif') no-repeat;
border-radius: 10px;
}
html
<!-- ajax loading dialog -->
<div>
<div class="modal-overlay"></div>
<div id="ajaxLoadingBox"></div>
</div>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
so I know how to make text appear on hover with CSS when there's only one image. however...
I want to make a page where there's three images of the same dimensions lined up like:
x | x | x
and hovering over one image makes a text blurb about that image appear, while the other two images disappear. do I need javascript/jQuery to do this or is it possible to do in CSS alone?
also, this is a bit more complicated and not necessary for the project, but would it be possible to have the image that is being hovered shift to the left (for the second and third images) while the text appears? and/or is it possible to have a transition function so that the text looks like it's rolling out from behind a screen or something to that effect?
those last parts are totally optional and might not even be doable, really I'm just trying to figure out how to get individual divs to appear on hover while the other images disappear. thanks!
Yes, that's possible with CSS alone.
There are many ways to achieve this but the general idea is to have a parent element for each image (x in your question) containing the image and the caption that you want to appear over the image. You can then use CSS to make the caption overlay and/or transition in to position when hovering.
A quick example would be: (see demo code).
<div class="image-wrapper">
<img src="http://placehold.it/180x120/eeeeee">
<div class="caption">
Your caption text here.
</div>
</div>
<div class="image-wrapper">
<img src="http://placehold.it/180x120/eeeeee">
<div class="caption">
Your caption text here.
</div>
</div>
<div class="image-wrapper">
<img src="http://placehold.it/180x120/eeeeee">
<div class="caption">
Your caption text here.
</div>
</div>
CSS
.image-wrapper {
position: relative;
width: 180px;
float: left;
margin-right: 10px;
}
.image-wrapper:last-child {
margin-right: 0;
}
.image-wrapper .caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: none;
background: rgba(0,0,0, 0.6);
color: #fff;
padding: 0.5rem;
}
.image-wrapper:hover .caption {
display: block;
}
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I am working on rebuilding my personal site and I have two elements which are floated side by side first at 80% and second at 20%.
http://codepen.io/anon/pen/xgask
SCSS
.container
width: 80%
margin: 0 auto
outline: 2px solid green
overflow: hidden /* Only used this here as a clearfix */
.text, .avatar
float: left
.text
width: 70%
outline: 1px solid red
.avatar
width: 25%
margin-left: 5%
outline: 1px solid blue
img
display: block
max-width: 100%
HTML
<div class="container">
<div class="text">
<p>Lots of text ...<p>
<p>Lots of text ...</p>
</div>
<div class="avatar">
<img src="http://www.foxprime.net/wp-content/uploads/2013/08/gravity-max-roller-coaster.jpg" />
</div>
</div>
On desktop sizes that is perfect. If the text in the first element is longer than the picture in the second the text does not wrap underneath which is what I want.
However, on mobile sizes I wish the text element to be full width and the picture to float right so the text wraps around.
With two separate elements as they are this is impossible, so is it appropriate to use javascript with something like enquire.js to react to the media query which then detaches the picture and places it at the beginning of the text element and have a style to float it right.
I know how to code it all, no problems there, just asking if it is appropriate to use a tiny bit of javascript to assist me getting the responsive layout I want?
With Responsive Web Design, there are many ways to accomplish the same thing; No one way is right.
Personally, I would try to work out a CSS-only solution or a solution that reorganizes my HTML markup to the best of my ability to reach the desired result. Only if I've exhausted all options in to making a CSS/Markup-only solution work would I turn to JavaScript.
In other words, yes, JavaScript is appropriate if it reaches your end result. However, if it's possible via Markup/CSS manipulation and no JavaScript, that is always the better choice.
If you don't mind putting the .avatar column first, you can get the exact results you want. Otherwise, I'd just hide and show with css, if it's just one image. Usually I avoid using jQuery unless it's absolutely necessary and after 3 years of responsive stuff, you get to know when to use it and when not to use it.
http://codepen.io/anon/pen/nfvmj
This is mobile first.
Put the .avatar before the .text in the html:
.container {
margin: 0 auto;
width:90%;
outline: 2px solid green;
overflow: hidden;
/* Only used this here as a clearfix */
}
.text {
outline: 1px solid red
}
.avatar {
float: right;
width: 50%;
margin:0 0 2% 2%;
}
.avatar img {
max-width: 100%
}
#media (min-width:600px) {
.text {
width: 70%;
float: left;
}
.avatar {
float: right
}
.container {
width: 80%;
}
.avatar {
width: 25%;
margin: 0 0 0 5%;
}
}