chema22r / project-intro

Simple UI modal to introduce a project

Project Intro

Simple UI modal to introduce a project.

Check out a live demo here.

Installation

npm install project-intro

Code To Run The Module

1. HTML code:

   <div id="projectIntroContainer" class="projectIntroContainer">
       <div class="projectIntroBack" onclick="projectIntro.fadeOut()"></div>
       <div id="projectIntroContent" class="projectIntroContent">
           <img id="projectIntroImg" src="<IMAGE>">
           <div id="projectIntroText">
               <h2>Lorem ipsum dolor sit amet</h2>
               <p>
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                   sed do eiusmod tempor incididunt ut labore et dolore
                   magna aliqua.<br>Ut enim ad minim veniam, quis nostrud
                   exercitation ullamco laboris nisi ut aliquip ex ea commodo
                   consequat.<br>Duis aute irure dolor in reprehenderit in
                   voluptate velit esse cillum dolore eu fugiat nulla
                   pariatur.<br>Excepteur sint occaecat cupidatat non
                   proident, sunt in culpa qui officia deserunt mollit anim
                   id est laborum.
               </p>
           </div>
           <span onclick="projectIntro.fadeOut()">&#10005;</span>
       </div>
   </div>

2. JS code:

   import * as projectIntro from "project-intro";
   window.projectIntro = projectIntro;
   projectIntro.init();

• The provided image will be resized to fit the assigned space, but the perfect size would be 300x350p
• To implement the module in a non-NPM environment, each project file must be imported individually, as in the example provided in /development/index.js. The following code can be used instead of the one specified in step 2, replacing the routes with the correct ones:

  import "./projectIntro.css";
  import * as projectIntro from "./projectIntro";
  
  window.projectIntro = projectIntro;
  projectIntro.init();

project-intro's Issues

Dependabot couldn't find the branch staging

Dependabot was set up to create pull requests against the branch staging, but couldn't find it.

If the branch has been permanently deleted you can update Dependabot's target branch in the .dependabot/config.yml file in this repo.

View the update logs.

Scrollbar display delay on mobile devices

The scrollbar has a delay on mobile devices

Add title

Add the title of the project just behind its information

Image resize to admit any image

Implement the functionality to admit and resize any image provided

Add examples

Add some examples into the project.

Project intro init fade in

Modify the project intro init function to make a complete fade in of the project intro information

Text load on initial animation

Text load on initial animation makes a strange effect while the modal expands horizontally. Modify this effect to make it disappear and load the text statically.

Static text during the init animation

Make the text to look static during the init animation.