For this showcase we used Bootstrap 4 Dynamic Table Generator in order to create a data table, showing the users from our database. We also added paging using the Bootstrap 4 Dynamic Paging Generator. Thanks to the App Connect State Management we store the current sort options and page status, so that even on page refresh they won't get lost.
In this showcase we applied App Connect Lazy Load to a dynamic Masonry Grid. We also applied nice fade in animations to the image, using the App Connect Animate CSS extension. Page load speed is really fast, as only the images required initially are loaded. When you start scrolling down, the rest of the images are loaded when they enter the viewport.
For this showcase we used App Connect Typed, to add a nice animated typing effect to the article title. We also added App Connect Swiper which loops through images using the "Coverflow" 3D effect. We applied light theme and enabled paging and navigation controls.
For this showcase we used App Connect Background Video, to add a responsive background video to the header section of the page. We also used App Connect Date Picker in order to add two date pickers on our page - one for start date and one for end day. Thanks to dynamic attributes available in App Connect, we set the end day to be minimum one day after the selected start date. Also the end date is disabled until you select a start date.
For this showcase we used App Connect Parallax Image for the images on the page. Scroll down to see the different parallax effects applied to the images.
In this showcase we use App Connect Dropzone in a Bootstrap 4 registration form. The users register for a photo contest and drop their images in the Dropzone. File types accepted in the Dropzone are limited to .jpg and .png
NOTE: This is just a demo form and no files are uploaded.
For this showcase we used Bootstrap 4 Cards and the Swiper Component to create a catalog of destinations for a responsive Travel Company website. We added the Swiper inside each of the cards, showing the available destination and included 3 images per destination, which the users can swipe through.
For this showcase we used the App Connect Swiper Extension to create a full screen vertical scrolling page, with vertical navigation dots. You can use your mouse wheel to scroll to the next/previous section. We also added parallax effect to the slides.
For this showcase we used App Connect Lazy Load for the images on the page. The script loads images only when they needed - when they enter the viewport, resulting in a really fast page loading time. We enhanced user experience by applying a fade in animation to the images, once they are loaded. Also, we used App Connect Browser Control in order to show/hide the page navbar, depending on scroll direction and scroll location.
For this showcase we used App Connect Swiper in order to create a responsive photography portfolio page. The Swiper is configured to display different number of slides per page, depending on the screen size: 1 for phones, 2 for tablets, 3 for laptops and 4 for larger screens. Loop mode is activated, so you can swipe through the images continuously. Navigation arrows and progressbar paging mode are enabled.
For this showcase we used App Connect Swiper in order to create a full-width image slider for a real estate page. The transitions are set to slide and we use images grid, set to 'auto' so that it looks great on all screen sizes. Navigation arrows and paging dots are enabled.
For this showcase we used App Connect API Data Source to get data for the gas stations in Iceland. The API provides the location for each gas station, as well as the prices for gasoline and diesel which you can see when clicking any marker on the map. The gas stations are shown in App Connect Google Maps.
For this showcase we used App Connect API Data Source extension in order to create a photo search page. We are using the Unsplash API as a data source and display the thumbnails in a masonry grid. Just enter a search term in the search field and then click on any of the thumbnails to preview the full-size images, displayed in App Connect Lightbox.
For this showcase we used App Connect API Data Source in order to get stock data from the IEX API. We show real-time information retrieved by the API in line charts on the page, where you can see the changes for the past year.
For this showcase we used App Connect Video Player and Bootstrap 4 in order to create a playlist, containing 6 videos. Click any of the episodes in the list, in order to play it.
For this showcase we used App Connect Browser control to animate the titles in the header horizontally and change their opacity as we scroll down the page.
For this showcase we used App Connect Browser Control 2 in order to create a parallax effect on scroll. We use the current scroll position, in dynamic attributes - for the background images positions in the page sections and also for the info boxes positions.
For this showcase we used App Connect Browser Control in order to style a few elements' properties on scroll. As soon as you scroll at least 300px down, you can see the navbar transforms from a big light design, into a more compact and darker one. An useful sctoll to top button appears in the bottom right corner of the page.
Scrolling further down the text and scroll icon in the header fade out.
For this showcase we used Bootstrap 4 Collapse and Bootstrap 4 Cards components in order to build an accordion for our registration page. It lists frequently asked questions and their answers.
For this amazing website, André Bender, CEO and founder of Swiss Web Factory used Dynamic Database Connectivity Collection PHP, which features our most advanced extensions, which allow you to connect to your data and format it any way you want.
The website is responsive, innovative and visually sophisticated. It offers advanced search features and detailed dynamic map with archaeological sites, while featuring easy navigation options which invites you to explore more.
For this showcase we used App Connect Smooth Scroll in order to create a details button in the page header, which scrolls smoothly to the details section. There you can find the location button, which when clicked opens a stylish modal containing App Connect Google Maps. Clicking the Show Surroundings button toggles the collapse component, which shows a list of the closest attractions near the hotel.
Additionally we added HTML5 Animate CSS 2 to the images and they fade in nicely during the smooth scrolling.
In this showcase you can see the different options available in App Connect Notifications. Explore the position, style and animation options available.
For this showcase we used App Connect Bootstrap 4 in order to create the page layout and added a responsive slideshow in the header, using the App Connect Slideshow. We also applied different transition effects to the slides.