Overlay particles.js on fullscreen div - javascript

I am using the following .js plugin:
https://github.com/VincentGarreau/particles.js/
With bootstrap 3's jumbotron, I have got the plugin working and my jumbotron is fullscreen when you get to my homepage (I think this is the issue) I am trying to run particles.js UNDER my jumbotron but for some reason the particles generate a whole viewport underneath my jumbotron. Like it is set up in it's own DIV after my jumbotron unit but I have <div id="particles-js"></div> wrapped around my jumbotron DIV. Which is where I get lost, the way I have it set up it should display underneath my jumbotron content and everything.
Here is my HTML:
<div id="particles-js">
<div class="jumbotron">
<div class="container center-vertically">
<div class="col-lg-6 col-lg-offset-3 text-center">
<h1>
A template with a bit of a different <strong>look & feel</strong>.
</h1>
<hr>
<p>Particles is a fun and multipurpose template, with clean & modern design <i>+</i> code.</p>
</div>
</div>
</div>
</div>
And the CSS for the jumbotron as well as the particles-js ID:
.jumbotron {
height: 100%;
width: 100%;
font-family: 'Roboto', sans-serif;
color: #fff;
padding-top: 79px;
padding-bottom: 0;
display: table;
}
#particles-js {
position: absolute;
width: 100%;
height: 100%;
background-image: url("");
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
background: #6819e8; /* Old browsers */
background: -moz-linear-gradient(left, #6819e8 0%, #7437d0 35%, #615fde 68%, #6980f2 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #6819e8 0%,#7437d0 35%,#615fde 68%,#6980f2 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #6819e8 0%,#7437d0 35%,#615fde 68%,#6980f2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6819e8', endColorstr='#6980f2',GradientType=1 ); /* IE6-9 */
}
.center-vertically {
display: table-cell;
text-align: center;
vertical-align: middle;
}
I have also uploaded a live version so it is easier to view the problem:
http://aliensix.com/company/

I think what you need to do is make your #particles-js child of .jumbotron.
#particles-js needs to be positioned absolutely relative to the .jumbotron.
HTML
<div class="jumbotron">
<div id="particles-js"></div>
</div>
CSS
.jumbotron {
position: relative;
// Other style rules ...
}

Related

Images on an owl carousel are zoomed in on mobile, how do I change it so that it displays all of the image on mobile?

This is how it looks on a desktop:
This is how it looks on mobile:
I have the standard properties for the carousel (its nothing special, just a slideshow). I just want it to scale and show the whole picture on mobile instead of zooming in on random parts.
HTML
<div class="home-banner">
<div class="owl-carousel owl-theme home-slider">
<div class="item pro_nw" style="background-image: url({{asset('public/frontend/images/slide1_v4.jpg')}});">
</div>
<div class="item pro_nw" style="background-image: url({{asset('public/frontend/images/slider-2.jpg')}});">
</div>
<div class="item pro_nw" style="background-image: url({{asset('public/frontend/images/slider-3.jpg')}});">
</div>
</div>
</div>
CSS
.home-slider{position: relative;}
.home-slider,
.home-slider .owl-stage-outer,
.home-slider .owl-stage-outer .owl-stage,
.home-slider .owl-stage-outer .owl-stage .owl-item,
.home-slider .owl-stage-outer .owl-stage .owl-item .item{height: 100%;}
.home-slider .owl-stage-outer .owl-stage .owl-item .item{
position: relative;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content:center;
-o-background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position:center center;
margin-bottom: 20px;
min-height: 730px;
}
It has to be one of the properties in the CSS (i think). I played around with a few of the properties, but it scales in odd ways instead.
for mobile media query make sure to change background-size to contain.
keep the original size for the screen wider than a mobile screen.
First change the background size to contain.
background-size: contain;
then detect the actual screen of the device as to adjust the image size corresponding to your liking
#media screen and (max-width: 768px) {
.home-slider .owl-stage-outer .owl-stage .owl-item .item{
//size you wanted
//for example---
width: 50%;
height: 50%;
}
}
for mobile responsive make use of media query depending on the screen
#media only screen and (max-width:600px) /* specify preferred width here*/
{
/*statement*/
}

How can I create a shorter version of my parallax?

Basically, I have created a parallax effect with 6 images with media queries for desktop and mobile. The images display fine in desktop mode. However, once I shrink my screen to mobile mode, some of the images just cut off and are not responsive. Because of this, I would like my parallax to only show 4 images on mobile view and the regular 6 images on desktop view. I have tried rearranging my code with my media queries to get this, but I can't seem to figure out a way. How can I do this so only the "viewable" images are only shown on mobile view? Any help is appreciated. Here is my code.
section.module h2 {
margin-bottom: 40px;
font-size: 30px;
}
section.module p {
margin-bottom: 40px;
font-size: 16px;
font-weight: 300;
}
section.module.content {
padding: 40px 0;
background-color: #AFC9F1;
}
section.module.parallax {
height: 800px;
background-position: 50% 50%;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
section.module.parallax h1 {
color: rgba(255, 255, 255, 0.8);
font-size: 48px;
line-height: 600px;
font-weight: 700;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
section.module.parallax-0 {
background-image: url("https://mms.businesswire.com/media/20170310005534/en/574694/5/NIO_EVE_04_Fr34.jpg");
height: 100vh;
opacity: 0.65;
}
section.module.parallax-1 {
background-image: url("https://mms.businesswire.com/media/20170310005534/en/574694/5/NIO_EVE_04_Fr34.jpg");
}
section.module.parallax-2 {
background-image: url("https://autodesignmagazine.com/wp-content/uploads/2017/03/2017031301_nio_eve.jpg");
}
section.module.parallax-3 {
background-image: url("https://www.nio.com/prod/s3fs-public/styles/tile_double_square_desktop_1x/public/2018-09/zip-eve-gallery-5.jpg?Agd8SYcynlrs7LqQu6N.GbrzxLw8vYJF&itok=hGg1N1lm");
}
section.module.parallax-4 {
background-image: url("https://cdn.vox-cdn.com/thumbor/bP1-Ysv4wJcYCMLrAoJv-T03Oto=/0x0:1920x1080/1400x1050/filters:focal(807x387:1113x693):format(jpeg)/cdn.vox-cdn.com/uploads/chorus_image/image/53656791/EVE_005_Overhead.0.jpg");
}
section.module.parallax-5 {
background-image: url("https://cimg1.ibsrv.net/ibimg/hgm/1920x1080-1/100/595/nio-eve-concept-2017-sxsw_100595869.jpg");
}
/* Parallax Mobile */
#media (min-width: 200px) and (max-width: 899px) {
section.module.parallax-0 {
background-image: url("https://miro.medium.com/max/3840/1*LT87ktpOB50UhsrRJYjI5A.jpeg");
}
section.module.parallax-1 {
background-image: url("https://miro.medium.com/max/3840/1*LT87ktpOB50UhsrRJYjI5A.jpeg");
}
section.module.parallax-2 {
background-image: url("https://autodesignmagazine.com/wp-content/uploads/2017/03/2017031301_nio_eve.jpg");
}
section.module.parallax-3 {
background-image: url("https://www.nio.com/prod/s3fs-public/styles/tile_double_square_desktop_1x/public/2018-09/zip-eve-gallery-5.jpg?Agd8SYcynlrs7LqQu6N.GbrzxLw8vYJF&itok=hGg1N1lm");
}
section.module.parallax-4 {
background-image: url("https://cdn.vox-cdn.com/thumbor/bP1-Ysv4wJcYCMLrAoJv-T03Oto=/0x0:1920x1080/1400x1050/filters:focal(807x387:1113x693):format(jpeg)/cdn.vox-cdn.com/uploads/chorus_image/image/53656791/EVE_005_Overhead.0.jpg");
}
section.module.parallax-5 {
background-image: url("https://cimg1.ibsrv.net/ibimg/hgm/1920x1080-1/100/595/nio-eve-concept-2017-sxsw_100595869.jpg");
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Parallax</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css' rel='stylesheet'>
</head>
<body>
<section class="module parallax parallax-0">
<div class="container text-center"></div>
</section>
<section class="module parallax parallax-1">
<div class="container text-center"></div>
</section>
<section class="module parallax parallax-2">
<div class="container text-center"></div>
</section>
<section class="module parallax parallax-3">
<div class="container text-center"></div>
</section>
<section class="module parallax parallax-4">
<div class="container text-center"></div>
</section>
<section class="module parallax parallax-5">
<div class="container text-center"></div>
</section>
<script src="script.js"></script>
</body>
</html>
You can play with background-size:contain on your section.module.parallax class for the mobile view. And for displaying images, you can put display: none on images you don't want to show on mobile.
If I understood you well.

Background-size: cover causing background image to resize on touch in mobile Chrome

I'm having an issue where I'm setting the background-image of a page in mobile to a new image designed for mobile. The image is set to background-size: cover, and is working fine in everything except for mobile Chrome. When scrolling in mobile Chrome, the image is resizing slightly. The design also has an absolute footer. You can see it in action here:
body {
height: 100%;
overflow: scroll;
}
.image {
display: block;
background: url(http://drawingimage.com/files/1/Shrek-Donkey-Beautiful-Image-Drawing.png) no-repeat center bottom;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.footer {
display: block;
position: absolute;
width: 100%;
bottom: -69px;
background-color: green;
}
<body>
<div class="wrap">
<div class="image">
</div>
<div class="footer">
<p> Footer info </p>
<p> More footer info</p>
</div>
</div>
</body>
If it covers the background then it leaves room for scrolling. Perhaps constrain the container. Or consider using any kind of media query to trap the problem on mobile sizes. Switching it to contain on mobile only. or removing the overflow scroll on mobile.

I'm having trouble creating a feed like this

I'm developing an app using ionic framework 2 but i'm having trouble creating a list of posts like this one (already got the code done but can't style the list)
Can anyone help me ?
Thats what i have atm
<ion-list no-lines>
<ion-item *ngFor="let post of data">
<div class="wrapper" style="background: url({{post.imgUrl}});
background-repeat: no-repeat;
background-size: cover;">
<p>{{post.imgUrl}}</p>
<p>{{post.title.rendered}}</p>
</div>
</ion-item>
.feed .wrapper p {
background: -webkit-linear-gradient(rgba(30,87,153,0) 0%, rgba(0,22,177,1) 100%);
background: -o-linear-gradient(rgba(30,87,153,0) 0%, rgba(0,22,177,1) 100%);
background: linear-gradient(rgba(30,87,153,0) 0%, rgba(0,22,177,1) 100%); /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */ /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001e5799', endColorstr='#0016b1',GradientType=0 );
bottom: 0;
color: white;
font-family: Roboto;
font-size: 1.25em;
left: 0;
padding: 0.25em 0.75em;
position: absolute;
text-overflow: ellipsis;
top: 75%;
line-height: 120px;
}
Uefa euro 2016 app
For this purpose you can use Ionic Card CSS components.
Cards have become widely used in recent years. They are a great way to
contain and organize information, while also setting up predictable
expectations for the user. Cards make it easy to display the same
information visually across many different screen sizes. They allow
for more control, are flexible, and can even be animated. Cards are
usually placed on top of one another, but they can also be used like a
"page" and swiped between, left and right.
Images can be combined with lists and other elements.
<div class="list card">
<div class="item item-avatar">
<img src="avatar.jpg">
<h2>Pretty Hate Machine</h2>
<p>Nine Inch Nails</p>
</div>
<div class="item item-image">
<img src="cover.jpg">
</div>
<a class="item item-icon-left assertive" href="#">
<i class="icon ion-music-note"></i>
Start listening
</a>
</div>

How to scroll a background image together with text in textarea?

I know this is bit difficlut to explain but you'll get an idea by seeing my code below, the situation is I've a textarea which having a line background(something like notebook and the image style is repeat), also the textarea become fixed height for eg. 300px, so my question is when a scroller comes I want to stick the lines with the text, now the text is scrolling and the background lines stay back into a fixed position..
Just tell me your suggetions, is that possible to scroll the background lines together with the text?
Here is my html code..
<div style="width:500px; height:300px; margin:0px auto; background:#ebebeb;">
<textarea style="width:100%; height:300px; background:url(line.jpg) repeat; line-height:30px; font-size:20px; font-family:Georgia, 'Times New Roman', Times, serif;" name="" cols="" rows=""></textarea>
</div>
and here you can see the image - {
}
Use background-attachment: local; after you set your background image.
demo
Works in IE9+, Firefox 5+, Safari 5+, Chrome and Opera
HTML:
<div>
<textarea>
background-attachment: local;
<!-- and so on, many more lines -->
background-attachment: local;
</textarea>
</div>
CSS:
div {
width: 500px;
margin: 0 auto;
background: #ebebeb;
}
textarea {
display: block;
width: 100%;
height: 300px;
background: url(http://i.stack.imgur.com/EN81e.jpg);
background-attachment: local;
font: 20px/1.5 Georgia, 'Times New Roman', Times, serif;
}
EDIT
Another better compatibility solution (only browsers in which this doesn't work are Opera Mobile and Opera Mini) would be not to use a textarea, but another div with a contenteditable attribute.
demo
HTML:
<div class='outer'>
<div class='inner' contenteditable='true'>
background-attachment: local;
<!-- more stuff -->
background-attachment: local;
</div>
</div>
CSS:
.outer {
overflow-y: scroll;
width: 500px;
height: 300px;
margin: 0 auto;
background: #ebebeb;
}
.inner {
width: 100%;
min-height: 300px;
background: url(http://i.stack.imgur.com/EN81e.jpg);
font: 20px/1.5 Georgia, 'Times New Roman', Times, serif;
}

Categories