ergo 7

Installation

First include the CSS files.

And JS files.

Loader

You can edit loading main text in ergo_loading_wrapper div in html file.ergo_loading_text contain main loading text.

HTML:

Slider/404

Text masking effect on a large background image.

1.How to create SVG text

First we will create our SVG element. The x and y values are the offset positions for the text. The font(s) we wish to use are written in style sheet.Replace the text values with your own

2.How to change transparent text background colour

For this you want to edit style in text-slider.html/404.html file

3.How to change background image

You can customise slider in style.css file.

.ergo_slider-pic1 {
  opacity: 1;
  background: url(../images/1.jpg) no-repeat center center;
  background-color: #ffc533;
  background-blend-mode: multiply;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
 
.ergo_slider-pic2 {
  animation-delay: 6s;
  -o-animation-delay: 6s;
  -moz--animation-delay: 6s;
  -webkit-animation-delay: 6s; 
  background: url(../images/2.jpg) no-repeat center center;
  background-color: #ffc533;
    background-blend-mode: multiply;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.ergo_slider-pic3 {
  animation-delay: 12s;
   -o-animation-delay: 12s;
  -moz--animation-delay: 12s;
  -webkit-animation-delay: 12s; 
  background: url(../images/3.jpg) no-repeat center center;
  background-color: #ffc533 ;
  background-blend-mode: multiply;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Video background

1.How to create SVG text

Like SLIDER you can create SVG elements in html page. The x and y values are the offset positions for the text.

2.How to change transparent text background colour

For this you want to edit style in html file

3.How to change video background

Build the HTML5 video tags then link your video source

Then make the video fullscreen using CSS

Older browsers will not recognize the video formats. For those browsers we create a background-image for the element

Note:The video needs to be small, and compressed as effectively as possible. At the same time, it needs to scale across different devices and their associated screens. In advanced cases, you might want to consider using inline media queries or matchmedia to send different quality versions of the video to different screen sizes. Try to keep the video under 5mb; ideally, under 500k.

Contact

1.How to edit contact details

You can edit the contact details inside SVG element in contact section

2.How to change background image

You can change background image in style.css

PLEASE NOTE- FOR IE